/* ===========================================================================
   Tabletop on a phone: an app, not a shrunken desktop.

   Loaded after every other stylesheet (layout.php), so it wins on order.
   The app shell (app bar, tab bar, More, sticky tab rows) runs up to
   900px, where app.css's own sidebar gives way, so tablets get it too; the
   denser content layouts are phone-only (760px, the width app.css already
   uses most). Everything is written against new tt-
   class families or with enough specificity to beat app.css's own
   !important small-screen blocks without adding to them.

   The shell: a slim app bar on top (mark, page title, account), a bottom
   tab bar (Home, Campaigns, Characters, GM, More) in place of the sidebar,
   and a "More" sheet for everything else the sidebar carried. Safe areas
   (notches, the home indicator) are respected throughout.
   =========================================================================== */

/* Desktop and tablet never see the phone shell. */
.tt-tabbar,
.tt-more,
.tt-appbar-mark,
.tt-appbar-title {
  display: none;
}

@media (max-width: 900px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    -webkit-tap-highlight-color: transparent;
  }

  /* overflow-x: hidden on these turned each into a scroll container, which
     quietly breaks every position: sticky inside (the app bar, the hub
     tabs). clip hides the same overflow without that side effect. */
  html,
  html body,
  html body .app-shell,
  html body .app-shell[data-dashboard],
  html body .app-shell .portal,
  html body .app-shell .vortex-workbench,
  html body .vortex-console .vortex-main-grid,
  html body .vortex-console .vortex-center {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  /* Native checkboxes and radios: a thumb-sized target. */
  .app-shell input[type="checkbox"],
  .app-shell input[type="radio"] {
    min-width: 22px;
    min-height: 22px;
    accent-color: var(--vx-cyan, #20d9e7);
  }

  /* ---- The shell -------------------------------------------------------- */
  .app-shell > .sidebar,
  .app-shell > .bounty-sidebar,
  .vortex-console > .vortex-sidebar,
  .app-shell[data-dashboard] > .sidebar,
  .app-shell[data-dashboard] > .bounty-sidebar {
    display: none !important;
  }

  .app-shell .portal,
  .app-shell .vortex-workbench,
  .app-shell[data-dashboard] .portal,
  .vortex-console > .vortex-workbench {
    padding: 0 12px calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  /* The app bar. */
  .app-shell .portal > .bounty-workbench-topbar,
  .app-shell .portal > .vortex-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 150 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    height: auto !important;
    min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    margin: 0 calc(-1 * max(12px, env(safe-area-inset-right, 0px))) 12px calc(-1 * max(12px, env(safe-area-inset-left, 0px))) !important;
    padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)) !important;
    border-bottom: 1px solid var(--vx-line, rgba(255, 255, 255, 0.12)) !important;
    /* Nearly opaque, and no backdrop-filter: a filter here would make the
       bar the containing block for fixed children such as Settings. */
    background: color-mix(in srgb, var(--vx-bg, #0b1018) 97%, transparent) !important;
  }

  .app-shell .portal > .bounty-workbench-topbar > nav,
  .app-shell .portal > .vortex-topbar > nav,
  .app-shell .sidebar-collapse-toggle,
  .app-shell .portal > header > .topbar-sheet-tabs {
    display: none !important;
  }

  .tt-appbar-mark {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .tt-appbar-mark img {
    display: block;
    width: 30px;
    height: 30px;
  }

  .tt-appbar-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--vx-text, #fff);
    font-family: "Roboto Slab", Georgia, serif;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .app-shell .portal > header .bounty-workbench-user,
  .app-shell .portal > header .vortex-user {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    justify-content: flex-end !important;
  }

  /* Text fields at 16px: smaller, and iOS zooms the page on focus. */
  .app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  .app-shell select,
  .app-shell textarea,
  .sd-login input,
  .sd-login select {
    font-size: 16px !important;
  }

  .app-shell .portal > header .bounty-workbench-user > strong,
  .app-shell .portal > header .vortex-user > strong {
    display: none !important;
  }

  .app-shell .portal > header .bounty-workbench-user > img,
  .app-shell .portal > header .vortex-user > img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
  }

  /* On a sheet: the save state as a dot, Save as a compact button. */
  .app-shell .portal > header [data-vortex-status] {
    max-width: 92px;
    overflow: hidden;
    font-size: 0.7rem !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--vx-muted, #9aa) !important;
  }

  .app-shell .portal > header [data-vortex-save] {
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    white-space: nowrap;
  }

  /* Settings lives inside the app bar's layer; lift that layer over the
     tab bar while Settings is open. */
  .app-shell .portal > header:has(.ui-settings-panel:not([hidden])) {
    z-index: 320 !important;
  }

  /* The campaign hub's section tabs: one sticky row under the app bar,
     scrolled sideways, instead of wrapping onto two lines. */
  .app-shell .hub-tabs {
    position: sticky !important;
    top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    z-index: 140 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 calc(-1 * max(12px, env(safe-area-inset-right, 0px))) 12px calc(-1 * max(12px, env(safe-area-inset-left, 0px))) !important;
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    border-bottom: 1px solid var(--vx-line, rgba(255, 255, 255, 0.12)) !important;
    background: color-mix(in srgb, var(--vx-bg, #050912) 95%, transparent) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .app-shell .hub-tabs::-webkit-scrollbar {
    display: none;
  }

  .app-shell .hub-tabs > [data-hub-tab] {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  /* Campaign hub, Resources: a bare 1fr column would not shrink below the
     dice roller's three 143px columns, pushing the whole page to ~490px. */
  .app-shell .hub-resources-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .app-shell .hub-resource-roller {
    position: static !important;
  }

  .app-shell .hub-resource-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .app-shell .dice-roller-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Each die: its whole name (Proficiency, Challenge), and a remove button
     big enough to hit. */
  .app-shell .dice-roller-die-control {
    display: flex !important;
    align-items: stretch !important;
    gap: 4px !important;
  }

  .app-shell .dice-roller-die-add {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }

  .app-shell .dice-roller-die-add > span:not(.die) {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    font-size: 0.74rem !important;
    line-height: 1.1 !important;
  }

  .app-shell .dice-roller-die-remove {
    flex: 0 0 34px !important;
    min-width: 34px !important;
    min-height: 44px !important;
  }

  /* The date and time picker: a bottom sheet, above the tab bar, with the
     page dimmed behind it, instead of a 670px popover running off-screen. */
  .app-shell .datetime-popover:not([hidden]) {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 310 !important;
    width: auto !important;
    max-width: none !important;
    max-height: 86dvh !important;
    overflow: auto !important;
    margin: 0 !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5), 0 -18px 50px rgba(0, 0, 0, 0.45) !important;
    overscroll-behavior: contain;
    animation: tt-sheet-up 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  /* Settings opens as a sheet from the bottom, not a desktop popover. */
  .app-shell .ui-settings-panel {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    translate: none !important;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5), 0 -18px 50px rgba(0, 0, 0, 0.45) !important;
    z-index: 310 !important;
    width: auto !important;
    max-width: none !important;
    max-height: 82dvh !important;
    overflow: auto !important;
    border-radius: 22px 22px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    overscroll-behavior: contain;
    animation: tt-sheet-up 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  /* ---- The tab bar ------------------------------------------------------ */
  .tt-tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 200;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--vx-line, rgba(255, 255, 255, 0.12));
    background: color-mix(in srgb, var(--vx-panel, #101722) 90%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
  }

  .tt-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--vx-muted, #9aa);
    font: 700 0.66rem/1.1 "Poppins", system-ui, sans-serif;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }

  .tt-tab .vx-ui-svg-icon,
  .tt-more-dots {
    width: 24px;
    height: 24px;
  }

  .tt-tab .vx-ui-svg-icon {
    position: relative;
    z-index: 1;
  }

  /* The active tab: a pill behind its icon, in the primary accent. */
  .tt-tab::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 52px;
    height: 30px;
    margin-left: -26px;
    border-radius: 999px;
    background: rgba(var(--vx-cyan-rgb, 0, 212, 255), 0.16);
    opacity: 0;
    transform: scaleX(0.6);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .tt-tab.active,
  .tt-tab[aria-expanded="true"] {
    color: var(--vx-cyan, #00d4ff);
  }

  .tt-tab.active::before,
  .tt-tab[aria-expanded="true"]::before {
    opacity: 1;
    transform: none;
  }

  .tt-tab:active {
    transform: scale(0.94);
  }

  .tt-tab:focus-visible {
    outline: 2px solid var(--vx-cyan, #00d4ff);
    outline-offset: -2px;
  }

  .tt-more-dots {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }

  .tt-more-dots i {
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: currentColor;
  }

  /* ---- The More sheet --------------------------------------------------- */
  .tt-more {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: block;
  }

  .tt-more[hidden] {
    display: none;
  }

  .tt-more-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: tt-fade 0.2s ease both;
  }

  .tt-more-sheet {
    position: absolute;
    inset: auto 0 0 0;
    display: grid;
    gap: 10px;
    max-height: 86dvh;
    overflow: auto;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-radius: 22px 22px 0 0;
    background: var(--vx-panel, #101722);
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45);
    overscroll-behavior: contain;
    animation: tt-sheet-up 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .tt-more-grip {
    justify-self: center;
    width: 40px;
    height: 5px;
    margin-bottom: 4px;
    border-radius: 999px;
    background: var(--vx-line, rgba(255, 255, 255, 0.2));
  }

  .tt-more-label {
    margin: 6px 2px 0;
    color: var(--vx-cyan, #00d4ff);
    font: 900 0.62rem/1 "Poppins", system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .tt-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
  }

  .tt-more-grid > a,
  .tt-more-grid > button {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 84px;
    margin: 0;
    padding: 14px 6px;
    border: 1px solid var(--vx-line, rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    background: var(--vx-panel-2, rgba(255, 255, 255, 0.04));
    color: var(--vx-text, #fff);
    font: 700 0.78rem/1.2 "Poppins", system-ui, sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .tt-more-grid .vx-ui-svg-icon {
    width: 26px;
    height: 26px;
    color: var(--vx-cyan, #00d4ff);
  }

  .tt-more-list {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--vx-line, rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    background: var(--vx-panel-2, rgba(255, 255, 255, 0.04));
  }

  .tt-more-list > a,
  .tt-more-list > button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-bottom: 1px solid var(--vx-line, rgba(255, 255, 255, 0.08));
    border-radius: 0;
    background: none;
    color: var(--vx-text, #fff);
    font: 600 0.92rem/1.2 "Poppins", system-ui, sans-serif;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .tt-more-list > :last-child {
    border-bottom: 0;
  }

  .tt-more-list .vx-ui-svg-icon,
  .tt-more-list img {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
  }

  .tt-more-list small {
    margin-left: auto;
    color: var(--vx-muted, #9aa);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
  }

  .tt-more-list > .is-quiet {
    color: var(--vx-muted, #9aa);
  }

  .tt-more-grid > :active,
  .tt-more-list > :active {
    background: rgba(var(--vx-cyan-rgb, 0, 212, 255), 0.1);
  }

  /* Open character sheets, as chips at the top of More. */
  .tt-more-tabs:empty {
    display: none;
  }

  .tt-more-tabs .topbar-sheet-tabs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .tt-more-tabs .topbar-sheet-tabs::before {
    display: none !important;
  }

  html.tt-more-open,
  html.tt-more-open body {
    overflow: hidden;
  }
}

@keyframes tt-sheet-up {
  from { transform: translateY(100%); }
}

@keyframes tt-fade {
  from { opacity: 0; }
}

/* ===========================================================================
   D&D 5e builder (character creation and level-up) on a phone.
   Full screen; a compact header; the steps as a swipeable strip; the
   choices filling the screen; the rulebook as a sheet pulled up from the
   bottom (closed until asked for); Back / Next always in reach.
   =========================================================================== */
@media (max-width: 760px) {
  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-overlay {
    padding: 0 !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-builder-dialog.sdb-shell {
    border: 0 !important;
    border-radius: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  /* Header: name and actions on one line, the progress bar under it. */
  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "id" "actions" "progress" !important;
    gap: 8px 10px !important;
    padding: 10px max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px)) !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-head-id {
    grid-area: id;
    min-width: 0;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-head-id .sdb-eyeline {
    display: none !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-head-id strong {
    display: block;
    overflow: hidden;
    font-size: 1.05rem !important;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-progress {
    grid-area: progress;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-head > .sdb-status,
  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-head-actions .dnd-builder-mandatory-tag {
    display: none !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-head-actions {
    grid-area: actions;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-head-actions [data-dnd-builder-close] {
    margin-left: auto !important;
    min-height: 36px !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-head-actions .dnd-builder-ruleset-toggle {
    display: flex !important;
    flex-direction: row !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-head-actions .dnd-builder-ruleset-toggle > * {
    min-height: 36px;
    padding: 0 9px !important;
    font-size: 0.72rem !important;
    white-space: nowrap;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-book-toggle {
    min-height: 36px !important;
    padding: 0 12px !important;
  }

  /* Body: the step strip, then the choices filling the rest. */
  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-builder-body.sdb-body,
  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-shell:not(.is-book-open) .sdb-body,
  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-shell.is-book-open .sdb-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-builder-sidebar.sdb-rail {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-left: 0 !important;
    border-bottom: 1px solid rgba(var(--vx-line-rgb, 119, 151, 180), 0.2) !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-builder-sidebar.sdb-rail::-webkit-scrollbar {
    display: none;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-builder-nav-item.sdb-rail-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 38px !important;
    padding: 0 12px 0 6px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-canvas {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* The rulebook: a sheet from the bottom over a dimmed builder. */
  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-shell.is-book-open .sdb-book {
    /* Opaque: the builder's base is translucent, and as a sheet over the
       cards it let them show through the text. */
    background:
      radial-gradient(100% 60% at 100% 0%, rgba(var(--vx-purple-rgb, 169, 107, 255), 0.12), transparent 60%),
      linear-gradient(var(--vx-panel, #0c1520), var(--vx-panel, #0c1520)),
      var(--vx-bg, #05101a) !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    z-index: 20 !important;
    width: auto !important;
    height: 76dvh !important;
    max-height: 76dvh !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    border: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5), 0 -18px 50px rgba(0, 0, 0, 0.45) !important;
    animation: tt-sheet-up 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-shell.is-book-open .sdb-book-head {
    position: relative;
    padding-top: 22px !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-shell.is-book-open .sdb-book-head::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 5px;
    margin-left: -20px;
    border-radius: 999px;
    background: rgba(var(--vx-line-rgb, 119, 151, 180), 0.5);
  }

  /* A starting package (background, class): label, then picks, then Claim,
     wrapping instead of squeezing the picker to a sliver. */
  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-currency-starting-package {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-currency-starting-package > :first-child {
    flex: 1 1 100% !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-builder-equipment-subpick {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    min-width: 0 !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-builder-equipment-subpick select {
    flex: 1 1 160px !important;
    min-width: 0 !important;
    min-height: 42px !important;
  }

  /* Footer: the readout as one swipeable row, Back / Next full size. */
  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-builder-footer.sdb-foot {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)) !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-readout {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-readout::-webkit-scrollbar {
    display: none;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-readout > * {
    flex: 0 0 auto !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-readout-abilities {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    gap: 6px !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-foot-nav {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .sdb-nav-btn {
    min-height: 46px !important;
    border-radius: 999px !important;
    font-size: 0.86rem !important;
  }
}

/* ===========================================================================
   Character sheets on a phone (every system), then D&D 5e's own layout.
   =========================================================================== */
@media (max-width: 900px) {
  /* App bar on a sheet: the title with the save state under it, a compact
     Save, no avatar (the sheet is the character). */
  .tt-appbar-text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    gap: 1px;
  }

  .tt-appbar-text .tt-appbar-title {
    flex: none;
  }

  .tt-appbar-text [data-vortex-status] {
    display: block !important;
    max-width: none !important;
    overflow: hidden;
    color: var(--vx-muted, #9aa) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  html body .vortex-console .portal > header .vortex-user > img,
  html body .vortex-console .portal > header .vortex-user > strong {
    display: none !important;
  }

  html body .vortex-console .portal > header [data-vortex-save] {
    min-height: 38px !important;
    padding: 0 16px !important;
    letter-spacing: 0.04em !important;
  }

  /* The sheet's own tabs: a sticky pill row under the app bar. The
     catalogue is in More (Compendium), so it leaves the row. */
  html body .vortex-console .vortex-sheet-tabs {
    position: sticky !important;
    top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    z-index: 140 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 calc(-1 * max(12px, env(safe-area-inset-right, 0px))) 12px calc(-1 * max(12px, env(safe-area-inset-left, 0px))) !important;
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    /* Snapping keeps the row's own side padding, so the first and last
       pills are never cut by the edge. */
    scroll-padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
    scrollbar-width: none;
    border-bottom: 1px solid var(--vx-line, rgba(255, 255, 255, 0.12)) !important;
    background: color-mix(in srgb, var(--vx-bg, #050912) 95%, transparent) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  html body .vortex-console .vortex-sheet-tabs::-webkit-scrollbar {
    display: none;
  }

  html body .vortex-console .vortex-sheet-tabs > [data-vortex-tab] {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  html body .vortex-console .vortex-sheet-tabs > [data-vortex-tab].active {
    background: rgba(var(--vx-cyan-rgb, 32, 217, 231), 0.16) !important;
    color: var(--vx-cyan, #20d9e7) !important;
  }

  html body .vortex-console .vortex-sheet-tabs > [data-vortex-tab]::after {
    display: none !important;
  }

  html body .vortex-console .vortex-sheet-tabs > .sheet-catalogue-button {
    display: none !important;
  }

  html body .vortex-console .vortex-main-grid,
  html body .vortex-console .vortex-center,
  html body .vortex-console .vortex-page {
    min-width: 0 !important;
  }
}

/* The Compendium (content library): full screen on a phone. app.css has
   eleven competing width rules for it; the last, min(330px, 38vw), left a
   142px strip with the content and Close off to the side. */
@media (max-width: 760px) {
  html body .vortex-console.library-open .vortex-library-panel {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(12px, env(safe-area-inset-left, 0px)) !important;
    overscroll-behavior: contain;
    animation: tt-sheet-up 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  /* The panel lives inside the main grid's own layer (z-index 95), under
     the app bar and tab bar; lift that layer while the panel is open. */
  html body .vortex-console.library-open .vortex-main-grid {
    z-index: 400 !important;
  }

  html body .vortex-console.library-open .vortex-library-panel .library-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 calc(-1 * max(12px, env(safe-area-inset-right, 0px))) 10px !important;
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--vx-bg, #050912) 96%, transparent) !important;
    border-bottom: 1px solid var(--vx-line, rgba(255, 255, 255, 0.12)) !important;
  }

  html body .vortex-console.library-open .vortex-library-panel .library-tabs button {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    white-space: nowrap !important;
  }

  /* Close stays at the end of the row, in reach and never scrolled away. */
  html body .vortex-console.library-open .vortex-library-panel .library-tabs [data-close-library] {
    position: sticky !important;
    right: 0 !important;
    margin-left: auto !important;
    order: 99;
  }

  html body .vortex-console.library-open .vortex-library-panel .content-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* A vital's manager (Hit Points, Armor Class, Initiative, Speed): a bottom
   sheet over a dimmed sheet instead of a card-sized popover over the page. */
@media (max-width: 760px) {
  html body .vortex-console .xp-popover:not([hidden]),
  html body .vortex-console .vital-popover:not([hidden]) {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    translate: none !important;
    z-index: 320 !important;
    width: auto !important;
    max-width: none !important;
    max-height: 86dvh !important;
    overflow: auto !important;
    margin: 0 !important;
    padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5), 0 -18px 50px rgba(0, 0, 0, 0.45) !important;
    overscroll-behavior: contain;
    animation: tt-sheet-up 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  html body .vortex-console .vital-popover:not([hidden]) button {
    min-height: 42px;
  }

  html body .vortex-console:has(.vital-popover:not([hidden])) .vortex-character-banner,
  html body .vortex-console:has(.xp-popover:not([hidden])) .vortex-character-banner {
    z-index: 320 !important;
  }
}

/* Content Rules (GM, D&D campaigns): the categories as a swipeable chip row
   above the list instead of a column of six rows. */
@media (max-width: 760px) {
  html body .app-shell .dnd-content-rules-rail {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  html body .app-shell .dnd-content-rules-rail::-webkit-scrollbar {
    display: none;
  }

  html body .app-shell .dnd-content-rules-rail > button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
}

/* Micro-labels (eyelines, stat-rail labels, counts, chips) are tuned for a
   wide desktop at 8.6-10px; on a phone they read at 10.5-11px. */
@media (max-width: 760px) {
  html body .app-shell .sd-eyeline,
  html body .app-shell .eyeline,
  html body .app-shell .hub-statrail span,
  html body .app-shell .hub-statrail small {
    font-size: 0.66rem !important;
  }

  html body .app-shell .sd-count {
    font-size: 0.7rem !important;
  }

  html body .app-shell .hub-chip {
    font-size: 0.7rem !important;
  }
}

/* Nested editors on a phone: the item editor sat four boxes deep (panel,
   card, editor, band), leaving its fields 241px of a 375px screen. */
@media (max-width: 760px) {
  html body .vortex-console .dnd-irow.is-editing {
    padding: 8px 6px !important;
  }

  html body .vortex-console .dnd-irow-editor {
    padding: 8px 0 0 !important;
    border: 0 !important;
    background: none !important;
  }

  html body .vortex-console .dnd-iedit-band {
    padding: 12px 10px !important;
  }
}

/* Pokemon parties on a phone: empty slots stay slim, remove is reachable. */
@media (max-width: 760px) {
  html body .vortex-console .pk-party-slot.is-empty {
    min-height: 48px !important;
    padding-block: 8px !important;
  }

  html body .vortex-console .pk-party-remove {
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* Small icon buttons on a sheet: thumb-sized on a phone. */
@media (max-width: 760px) {
  html body .vortex-console .dnd-icodex-tool,
  html body .vortex-console .dnd-codex-tool,
  html body .vortex-console .dnd-feature-pin,
  html body .vortex-console .dnd-charge-step,
  html body .vortex-console .dnd-panel-gear,
  html body .vortex-console .vital-gear {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* Steppers (characteristics, ranks, counters) and roll rows. */
  html body .vortex-console button[aria-label^="Decrease"],
  html body .vortex-console button[aria-label^="Increase"],
  html body .vortex-console button[aria-label^="Spend"],
  html body .vortex-console button[aria-label^="Restore"] {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  html body .vortex-console .dice-row.roll {
    min-height: 40px !important;
  }

  html body .vortex-console .dnd-icodex-toggle {
    min-height: 36px !important;
    padding-inline: 12px !important;
  }
}

/* Drag handles need a mouse (HTML drag and drop ignores touch); on a touch
   screen they only take room. */
@media (max-width: 760px) and (pointer: coarse) {
  html body .vortex-console .dnd-icodex-grip,
  html body .vortex-console .dnd-codex-grip {
    display: none !important;
  }
  /* With the grip gone its column (and gap) goes too, so a card's title
     lines up with its text. */
  html body [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-codex-card-head {
    grid-template-columns: 0 minmax(0, 1fr) auto auto;
    column-gap: 0;
  }

  html body [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-codex-card-head > .dnd-codex-tools {
    margin-left: 8px;
  }
}

/* The tab bar's labels all share one size (a button inherited its own). */
@media (max-width: 900px) {
  html body .tt-tabbar .tt-tab,
  html body .tt-tabbar button.tt-tab {
    font: 700 0.66rem/1.1 "Poppins", system-ui, sans-serif !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
  }

  html body .tt-tabbar .tt-tab > span:not(.tt-more-dots):not(.vx-ui-svg-icon) {
    font: inherit !important;
  }
}

@media (max-width: 760px) {
  /* ---- Every sheet's banner: portrait and identity side by side, then vitals. */
  html body .vortex-console .vortex-character-banner {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-areas: "portrait identity" "vitals vitals" !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 12px !important;
    min-height: 0 !important;
  }

  html body .vortex-console .vortex-portrait-wrap {
    grid-area: portrait;
    width: 72px !important;
    height: 72px !important;
    min-height: 0 !important;
  }

  html body .vortex-console .vortex-portrait-button,
  html body .vortex-console .vortex-portrait {
    width: 72px !important;
    height: 72px !important;
    border-radius: 16px !important;
  }

  html body .vortex-console .vortex-portrait-button > span {
    display: none !important;
  }

  html body .vortex-console .vortex-identity {
    grid-area: identity;
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  html body .vortex-console .vortex-identity > .inline-edit > span,
  html body .vortex-console .vortex-identity > .inline-edit::before {
    display: none !important;
  }

  html body .vortex-console .vortex-identity > .inline-edit {
    font-size: 0 !important;
  }

  html body .vortex-console .vortex-identity > .inline-edit input {
    width: 100% !important;
    padding: 0 !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
  }

  html body .vortex-console .vortex-identity > p {
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    margin: 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }

  html body .vortex-console .vortex-identity .vortex-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  html body .vortex-console .vortex-identity .xp-popover-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  html body .vortex-console .vortex-identity .xp-summary-button {
    width: 100% !important;
    min-height: 48px !important;
    padding: 6px 10px !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-identity .vortex-tags {
    flex-wrap: nowrap !important;
  }

  /* Genesys and SWEOTE vitals: two to a row. */
  html body .vortex-console:not([data-sheet-system="dnd5e"]) .vortex-vitals {
    grid-area: vitals;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  html body .vortex-console:not([data-sheet-system="dnd5e"]) .vortex-vitals > .vital-card {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px 10px 10px !important;
  }

  html body .vortex-console:not([data-sheet-system="dnd5e"]) .vortex-vitals .vital-value-display strong,
  html body .vortex-console:not([data-sheet-system="dnd5e"]) .vortex-vitals .vital-ratio-display strong {
    font-size: 1.4rem !important;
  }

  /* Vitals: three to a row, Hit Points two wide, Inspiration a slim bar. */
  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals {
    grid-area: vitals;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals > .vital-card {
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 8px 10px 10px !important;
    gap: 4px !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals > .dnd-hp-card {
    grid-column: span 2;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals > .dnd-inspiration-card {
    grid-column: 1 / -1;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals > .vital-card > header {
    min-height: 0 !important;
    font-size: 0.62rem !important;
  }

  html body .vortex-console .vortex-vitals > .vital-card > header small,
  html body .vortex-console .vortex-vitals > .vital-card > header div > span:not(:first-child) {
    display: none !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals .vital-gear {
    width: 30px !important;
    height: 30px !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals .vital-value-display,
  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals .vital-ratio-display {
    min-height: 44px !important;
    padding: 4px !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals .vital-value-display strong,
  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals .vital-ratio-display strong {
    font-size: 1.5rem !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-inspiration-toggle {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 40px !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-inspiration-toggle .dnd-inspiration-icon {
    width: 24px !important;
    height: 24px !important;
  }

  /* Abilities: a 3 by 2 grid of tiles instead of six full-width rows. */
  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-ability-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-ability-tile {
    display: grid !important;
    justify-items: center !important;
    gap: 4px !important;
    min-height: 0 !important;
    padding: 10px 6px !important;
    text-align: center !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-ability-tile > header {
    justify-content: center !important;
    gap: 4px !important;
    font-size: 0.62rem !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-ability-tile > header .dnd-ability-icon {
    display: none !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-ability-values {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 4px !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-ability-values strong {
    font-size: 1.6rem !important;
    line-height: 1 !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-roll-modifier {
    min-width: 52px !important;
    min-height: 36px !important;
  }

  /* Short and Long Rest take the cell beside Hit Points, stacked and
     labelled, so they still read as "left of the hit points". */
  /* With the rest buttons in the first cell, Speed starts the third row;
     Inspiration fills the rest of it instead of a row of its own. */
  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals > .dnd-inspiration-card {
    grid-column: span 2;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals > .dnd-rest-launch {
    grid-row: auto;
    align-self: stretch;
    justify-self: stretch;
    justify-content: center;
    gap: 6px;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-rest-launch-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    height: auto;
    min-height: 40px;
    padding: 0 8px;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-rest-launch-button .dnd-character-control-icon {
    width: 20px;
    height: 20px;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-rest-launch-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-transform: uppercase;
  }
}

/* Installed as an app (home screen): no browser chrome above the app bar. */
@media (display-mode: standalone) and (max-width: 900px) {
  body {
    overscroll-behavior-y: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tt-more-sheet,
  .tt-more-scrim,
  .app-shell .ui-settings-panel {
    animation: none !important;
  }

  .tt-tab::before {
    transition: none !important;
  }
}

/* Paper vitals on a phone: the trio, then Hit Points across, then
   Proficiency and Inspiration, then the two rests side by side.
   A manager opens as a bottom sheet, like the Vortex ones. */
@media (max-width: 760px) {
  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals.is-paper {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    grid-template-areas:
      "ac ac init init speed speed"
      "hp hp hp hp hp hp"
      "prof prof prof insp insp insp"
      "rest rest rest rest rest rest" !important;
    gap: 8px !important;
    max-width: none !important;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals.is-paper > .dnd-rest-launch {
    flex-direction: row !important;
    align-self: stretch;
    justify-self: stretch;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals.is-paper > .dnd-rest-launch .dnd-rest-launch-button {
    flex: 1 1 0;
    justify-content: center;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals.is-paper .dpv-ac {
    min-height: 96px;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals.is-paper .dpv-num {
    font-size: 1.6rem;
  }

  /* Hit Points keeps one height whichever view it shows. */
  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals.is-paper .dpv-hp {
    height: 168px;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals.is-paper .dpv-hp-now .dpv-num {
    font-size: 2.4rem;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals.is-paper .dpv-quick {
    height: 34px;
    padding: 0 12px;
  }

  html body .vortex-console[data-sheet-system="dnd5e"] .vortex-vitals.is-paper .dpv-gear {
    width: 30px;
    height: 30px;
  }

  html body .vortex-console .vortex-vitals.is-paper .dpv-pop:not([hidden]) {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 320 !important;
    width: auto !important;
    max-width: none !important;
    max-height: 86dvh !important;
    overflow: auto !important;
    margin: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5), 0 -18px 50px rgba(0, 0, 0, 0.45) !important;
    overscroll-behavior: contain;
    animation: tt-sheet-up 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  html body .vortex-console .vortex-vitals.is-paper .dpv-pop:not([hidden]) :is(.dpv-btn, .dpv-amount button, input) {
    height: 42px;
    min-height: 42px;
  }

  html body .vortex-console:has(.dpv-pop:not([hidden])) .vortex-character-banner {
    z-index: 320 !important;
  }
}

/* Senses on a phone: no Resources panel beside it to match, so the list
   sits at its own height instead of spreading its groups apart. */
@media (max-width: 760px) {
  html body .vortex-console[data-sheet-system="dnd5e"] .dnd-senses-ledger {
    min-height: 0 !important;
    justify-content: flex-start !important;
  }
}

/* Feature actions on a phone: a long condition tag ("When the check still
   fails") wraps under the action instead of being squeezed to a letter. */
@media (max-width: 760px) {
  html body [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-codex-card .dnd-feature-action-row {
    flex-wrap: wrap;
  }

  html body [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-codex-card .dnd-feature-action-tag {
    max-width: 100%;
  }
}