/* Responsive layout uses the existing artwork and live DOM; desktop remains
 * owned by styles-integrated.css and styles-equipment-motion.css. */
.hero-picker-toggle,
.mobile-jump,
.mobile-result-summary { display: none; }
.item-card-detail { display: none; }

@media (max-width: 1000px) {
  html body { padding-bottom: 56px !important; }
  html body .tool-header { background: rgba(250, 248, 244, .96) !important; }
  html body .hero-panel {
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    background: rgba(251, 249, 245, .91) !important;
    box-shadow: 0 2px 9px rgba(75, 62, 48, .09) !important;
  }
  html body .hero-panel .hero-picker-toggle {
    display: grid !important;
    width: 100% !important;
    min-height: 54px !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #30302c !important;
    text-align: left !important;
  }
  html body .hero-panel .hero-picker-toggle img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }
  html body .hero-panel .hero-picker-toggle span { display: grid !important; min-width: 0 !important; }
  html body .hero-panel .hero-picker-toggle small { color: #79746b !important; font-size: 10px !important; }
  html body .hero-panel .hero-picker-toggle strong { overflow: hidden !important; font-size: 15px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html body .hero-panel .hero-picker-toggle b { color: #735f4c !important; font-size: 12px !important; font-weight: 600 !important; }
  html body .hero-panel .hero-picker-toggle b::after { display: inline-block; margin-left: 6px; content: '⌄'; }
  html body .hero-panel.mobile-picker-open .hero-picker-toggle b::after { transform: rotate(180deg); }
  html body .hero-panel .hero-picker-toggle:focus-visible { outline: 2px solid #8b674a !important; outline-offset: 2px !important; }
  html body .hero-panel .hero-grid { display: none !important; }
  html body .hero-panel.mobile-picker-open .hero-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    max-height: min(48dvh, 340px) !important;
    margin-top: 8px !important;
    padding: 5px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-top: 1px solid rgba(117, 103, 82, .16) !important;
  }
  html body .hero-panel .hero-option { min-height: 44px !important; height: auto !important; }
  html body .hero-panel .hero-option span { width: auto !important; min-width: 0 !important; white-space: normal !important; }
  html body .build-panel,
  html body .result-panel { scroll-margin-top: 58px !important; }
  html body .mobile-jump {
    position: fixed !important;
    z-index: 60 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: grid !important;
    height: 54px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 6px max(12px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    border-top: 1px solid rgba(120, 103, 81, .2) !important;
    background: rgba(250, 248, 244, .97) !important;
    box-shadow: 0 -2px 12px rgba(61, 53, 43, .08) !important;
  }
  html body .mobile-jump a {
    display: grid !important;
    min-height: 44px !important;
    place-items: center !important;
    border-radius: 7px !important;
    color: #51493f !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
  html body .mobile-jump a[aria-current="location"] { background: rgba(133, 100, 76, .11) !important; color: #624734 !important; }
  html body .mobile-jump a:focus-visible { outline: 2px solid #8b674a !important; outline-offset: -2px !important; }
  html body:has(input:focus) .mobile-jump { display: none !important; }

  /* Tablet keeps the accepted six-card board, but its stats need the extra
   * 20px that the baseline showed was already overflowing. */
  html body .build-column > .result-stats { height: 220px !important; min-height: 220px !important; }
  html body .build-column > .combat-block { top: 916px !important; }
  html body .build-column > .target-block { top: 1212px !important; }
  html body .build-column,
  html body .build-column-loadout { height: 1428px !important; min-height: 1428px !important; }

  /* Full result readings remain in the result panel at every viewport. */
  html body .result-panel { right: auto !important; left: auto !important; width: 100% !important; height: auto !important; overflow: visible !important; }
  html body .result-panel > .output-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto 100px auto auto !important;
    gap: 12px 8px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
    background-size: 100% auto !important;
    background-color: rgba(250, 248, 244, .92) !important;
  }
  html body .output-summary .result-header { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; }
  html body .output-summary > .summary-identity { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; width: auto !important; height: auto !important; justify-content: flex-end !important; }
  html body .output-summary > .summary-identity img { display: none !important; }
  html body .output-summary > .dps-result { grid-column: 1 !important; grid-row: 2 !important; width: auto !important; height: auto !important; min-width: 0 !important; padding: 0 8px 0 0 !important; border-right: 1px solid rgba(135, 112, 87, .19) !important; }
  html body .output-summary > .summary-total { grid-column: 2 !important; grid-row: 2 !important; width: auto !important; height: auto !important; min-width: 0 !important; padding: 0 0 0 8px !important; }
  html body .result-panel .dps-result strong { font-size: clamp(37px, 7vw, 52px) !important; }
  html body .result-panel .summary-total strong { font-size: clamp(29px, 5.5vw, 43px) !important; }
  html body .output-summary > .damage-bars { grid-column: 1 / -1 !important; grid-row: 3 !important; width: auto !important; height: auto !important; min-width: 0 !important; }
  html body .output-summary > .result-metrics { grid-column: 1 / -1 !important; grid-row: 4 !important; width: auto !important; height: auto !important; min-height: 58px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; padding: 8px 0 0 !important; border-top: 1px solid rgba(135, 112, 87, .16) !important; }
  html body .result-panel > .skill-block,
  html body .result-panel > .right-calculation-details { height: auto !important; min-height: 180px !important; background-size: 100% auto !important; background-color: rgba(250, 248, 244, .92) !important; }
  html body .result-panel > .skill-block .skill-state-list { gap: 8px !important; }
  html body .result-panel > .right-calculation-details #calculationBreakdown { grid-template-columns: 1fr !important; grid-template-rows: none !important; }

  /* Both selection dialogs scroll inside the viewport; their primary action
   * remains reachable even while a long item/rune list is being browsed. */
  html body :is(#itemsDialog, #runesDialog, #itemDetailDialog) { box-sizing: border-box !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow: hidden !important; }
  html body :is(#itemsDialog, #runesDialog, #itemDetailDialog) .dialog-shell { box-sizing: border-box !important; max-height: calc(100dvh - 26px) !important; overflow-y: auto !important; }
  html body :is(#itemsDialog, #runesDialog) .dialog-header { position: sticky !important; top: 0 !important; z-index: 10 !important; background: #faf8f4 !important; }
}

@media (max-width: 600px) {
  /* Phone composition: preserve the live controls and artwork, but let the
   * content establish its height instead of stretching desktop coordinates. */
  html body { --phone-pad: 16px; --phone-gap: 12px; --phone-ink: #30312f; --phone-muted: #6d706c; }
  html body { --phone-header-height: 132px; padding-top: var(--phone-header-height) !important; }
  html { scroll-padding-top: 144px; }
  html body .tool-header { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: 44px 72px !important; gap: 0 !important; height: var(--phone-header-height) !important; min-height: var(--phone-header-height) !important; padding: 4px 14px 12px !important; background: #faf8f4 !important; z-index: 70 !important; }
  /* Keep the page's initial 132px reservation stable while the fixed header
   * contracts. Toggling the summary must not move content or the scroll offset. */
  html body .tool-header:not(.mobile-summary-visible) { height: 56px !important; min-height: 56px !important; grid-template-rows: 44px !important; padding-bottom: 8px !important; }
  html body .mobile-result-summary[hidden] { display: none !important; }
  html body :is(.build-panel, .result-panel) { scroll-margin-top: 0 !important; }
  html body .tool-title h1 { font-size: 19px !important; letter-spacing: -.03em !important; }
  html body .tool-header #resetBtn { height: 44px !important; padding: 0 10px !important; border-color: transparent !important; background: transparent !important; }
  html body .mobile-result-summary { display: grid !important; grid-column: 1 / -1 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; min-width: 0 !important; }
  html body .mobile-result-summary > :is(.dps-result, .summary-total) { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 2px !important; min-width: 0 !important; margin: 0 !important; padding: 0 8px !important; border: 0 !important; }
  html body .mobile-result-summary > .dps-result { border-right: 1px solid #857f6c26 !important; }
  html body .mobile-result-summary > div > span:not(.result-delta) { align-self: center !important; color: var(--phone-muted) !important; font-size: 11px !important; line-height: 16px !important; font-weight: 500 !important; }
  html body .mobile-result-summary strong { display: block !important; width: max-content !important; max-width: 100% !important; font-family: 'Bebas Neue', 'Teko', sans-serif !important; font-size: 36px !important; font-weight: 400 !important; font-variant-numeric: tabular-nums !important; line-height: 38px !important; letter-spacing: .01em !important; text-shadow: none !important; }
  html body .mobile-result-summary .dps-result strong { color: #d95035 !important; }
  html body .mobile-result-summary .summary-total strong { color: #0783ac !important; }
  html body .mobile-result-summary small { display: block !important; position: static !important; margin: 0 !important; font-size: 10px !important; line-height: 12px !important; color: var(--phone-muted) !important; }
  html body .mobile-result-summary .result-delta { position: absolute !important; z-index: 2; top: 32px; right: 0; font: 600 16px/20px 'Teko', sans-serif !important; color: #087b9f !important; pointer-events: none; white-space: nowrap; animation: result-delta-float 850ms ease-out backwards; }
  html body .mobile-result-summary .result-delta.loss { color: #bf4a3b !important; }
  html body .workspace { padding: 12px !important; }
  html body .build-panel { margin-top: 0 !important; }
  html body .hero-panel { position: relative !important; inset: auto !important; height: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; z-index: 25 !important; }
  html body .hero-panel .hero-picker-toggle { position: absolute !important; top: 24px !important; right: 14px !important; width: 80px !important; min-height: 44px !important; grid-template-columns: 1fr !important; padding: 0 4px !important; text-align: center !important; }
  html body .hero-panel .hero-picker-toggle > :is(img, span) { display: none !important; }
  html body .hero-panel .hero-picker-toggle b { font-size: 12px !important; }
  html body .hero-panel.mobile-picker-open .hero-grid { position: absolute !important; top: 72px !important; right: 8px !important; left: 8px !important; margin: 0 !important; padding: 10px !important; border: 1px solid #d6d2c9 !important; border-radius: 10px !important; background: #faf9f5 !important; box-shadow: 0 8px 24px #52463824 !important; }
  html body .hero-panel.mobile-picker-open .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .hero-panel .hero-option { gap: 8px !important; padding: 4px 6px !important; }
  html body .hero-panel .hero-option img { width: 34px !important; height: 34px !important; }
  html body .hero-panel .hero-option span { font-size: 12px !important; line-height: 16px !important; }

  html body .build-column,
  html body .build-column-loadout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(7, auto) !important; gap: 0 !important; height: auto !important; min-height: 0 !important; isolation: isolate !important; }
  html body .build-column > :is(.loadout-block, .skill-rank-panel, .target-block) { position: relative !important; display: block !important; inset: auto !important; height: auto !important; min-height: 0 !important; grid-column: 1 !important; pointer-events: auto !important; box-sizing: border-box !important; }
  html body .build-column::before { content: ''; grid-column: 1; grid-row: 2 / 5; z-index: -1; min-height: 0; background: url('assets/porcelain-build-panel-direct-ground-v6-continuous-clean.webp') center / 100% 100% no-repeat; pointer-events: none; }
  html body .build-column > .hero-context-block { grid-row: 1 !important; margin-bottom: var(--phone-gap) !important; }
  html body .build-column > .equipment-block { grid-row: 2 !important; }
  html body .build-column > .rune-block { grid-row: 3 !important; }
  html body .build-column > .build-skill-rank { grid-row: 4 !important; }
  html body .build-column > .result-stats { grid-row: 5 !important; margin-top: var(--phone-gap) !important; }
  html body .build-column > .combat-block { grid-row: 6 !important; margin-top: var(--phone-gap) !important; }
  html body .build-column > .target-block { grid-row: 7 !important; margin-top: var(--phone-gap) !important; }
  html body .build-column > section > header h2 { color: var(--phone-ink) !important; font-size: 16px !important; }
  html body .build-column > .hero-context-block {
    display: block !important;
    padding: 12px var(--phone-pad) 16px !important;
    background-size: 100% 100% !important;
    background-color: transparent !important;
  }
  html body .build-column > .hero-context-block::before { width: calc(100% - 12px) !important; height: 90px !important; background-position: right 30% !important; background-size: auto 190px !important; mask-image: linear-gradient(180deg, #000 50%, transparent) !important; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent) !important; }
  html body .build-column > .hero-context-block > :is(.selected-hero, .level-row, .hero-boost-row) {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body .build-column > .hero-context-block .selected-hero {
    display: flex !important;
    height: 72px !important;
    min-height: 72px !important;
    gap: 12px !important;
    padding: 0 76px 0 0 !important;
    border: 0 !important;
  }
  html body .build-column > .hero-context-block .selected-hero img { width: 54px !important; height: 54px !important; flex: 0 0 54px !important; }
  html body .build-column > .hero-context-block .selected-hero > div {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
  }
  html body #selectedHeroName {
    overflow: visible !important;
    font-size: 20px !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
  html body .build-column > .hero-context-block .level-row { display: block !important; height: 58px !important; min-height: 58px !important; padding: 6px 0 0 !important; background: none !important; }
  html body .build-column > .hero-context-block .level-row label { width: 100% !important; padding: 0 !important; margin: 0 !important; transform: none !important; }
  html body .build-column > .hero-context-block .level-row > :is(label, input) { position: relative !important; inset: auto !important; transform: none !important; }
  html body .build-column > .hero-context-block .level-row label output { white-space: nowrap !important; }
  html body .build-column > .hero-context-block .level-row input[type="range"] { position: relative !important; inset: auto !important; width: 100% !important; height: 32px !important; margin: 0 !important; }
  html body .build-column > .hero-context-block .level-row label span { font-size: 13px !important; }
  html body .build-column > .hero-context-block .hero-boost-row { height: 64px !important; min-height: 64px !important; margin-top: 4px !important; padding: 0 !important; }
  html body .build-column > .hero-context-block .boost-caption { display: none !important; }
  html body .build-column > .hero-context-block .boost-controls-secondary {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(76px, .8fr) minmax(0, 2fr) !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .build-column > .hero-context-block .boost-controls-secondary > .boost-control {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html body .build-column > .hero-context-block .boost-controls-secondary > .boost-control > span { font-size: 11px !important; color: var(--phone-muted) !important; }
  html body .build-column > .hero-context-block .boost-aura-pair { display: grid !important; width: 100% !important; grid-template-columns: minmax(0, 1fr) 68px !important; gap: 5px !important; }
  html body .build-column > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions),
  html body .build-column > .hero-context-block .boost-select-fit,
  html body .build-column > .hero-context-block #supportAuraOptions .boost-select-fit { width: 100% !important; min-width: 0 !important; }
  html body .build-column-loadout > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions) .boost-current { width: 100% !important; height: 44px !important; min-height: 44px !important; padding-right: 16px !important; }

  html body .build-column > .equipment-block {
    padding: 12px var(--phone-pad) 0 !important;
    background: none !important;
  }
  html body .build-column > :is(.equipment-block, .rune-block) > header { position: relative !important; inset: auto !important; width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 0 8px !important; }
  html body .build-column-loadout > :is(.equipment-block, .rune-block) > header > :is(#openItemsBtn, #openRunesBtn) { height: 44px !important; min-height: 44px !important; }
  html body .build-column > .equipment-block .equipped-row {
    display: grid !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 150px) !important;
    gap: 4px 6px !important;
  }
  html body .build-column > .equipment-block .equipment-slot { box-sizing: border-box !important; width: 100% !important; height: 150px !important; min-height: 150px !important; transform: none !important; }
  html body .build-column > .equipment-block .equipment-main {
    width: 100% !important;
    height: 116px !important;
    min-height: 116px !important;
    grid-template-rows: 0 58px 40px !important;
    padding: 12px 0 0 !important;
  }
  html body .build-column > .equipment-block .equipment-main > img,
  html body .build-column > .equipment-block .equipment-main:is(:hover, :focus-visible) > img { width: 54px !important; height: 54px !important; transform: none !important; }
  html body .build-column > .equipment-block .equipment-main > b { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 1px !important; height: 40px !important; margin: 0 !important; transform: none !important; }
  html body .build-column > .equipment-block .equipment-main b em { overflow: visible !important; max-width: 100% !important; font-size: 12px !important; line-height: 17px !important; text-overflow: clip !important; white-space: normal !important; color: var(--phone-ink) !important; }
  html body .build-column > .equipment-block .equipment-main b small { font-size: 11px !important; line-height: 14px !important; color: var(--phone-muted) !important; }
  html body .build-column > .equipment-block .equipment-main .equipment-glass-surface { display: none !important; visibility: hidden !important; opacity: 0 !important; }
  html body .build-column > .equipment-block .equipment-main::after { content: none !important; display: none !important; }
  html body .build-column > .equipment-block .equipment-slot > .equipment-remove { top: -4px !important; right: -8px !important; width: 44px !important; height: 44px !important; opacity: 1 !important; pointer-events: auto !important; }
  html body .build-column > .equipment-block .equipment-slot > :is(.item-passive-toggle, .item-passive-auto, .item-proc-control, .item-choice-select) {
    top: auto !important;
    right: 4px !important;
    bottom: 0 !important;
    left: 4px !important;
    width: auto !important;
    min-height: 44px !important;
    transform: none !important;
    font-size: 10px !important;
  }
  html body .build-column > .equipment-block .equipment-slot > .item-passive-toggle { justify-content: center !important; gap: 4px !important; max-width: none !important; }
  html body .build-column > .equipment-block .equipment-slot.empty .equipment-main b { width: 48px !important; height: 48px !important; transform: none !important; }

  html body .build-column > .rune-block { padding: 4px var(--phone-pad) 0 !important; background: none !important; }
  /* The original 1600×1040 sheet's white footer starts at y=900. Reuse that
   * 140px strip here so both phone control rows stay on it as rune copy grows;
   * the shared sheet and all content coordinates above remain unchanged. */
  html body .build-column > .build-skill-rank {
    padding: 12px var(--phone-pad) 18px !important;
    background: url('assets/porcelain-build-panel-direct-ground-v6-continuous-clean.webp') center bottom / 100% 742.857143% no-repeat !important;
  }
  html body .build-column > .rune-block .rune-summary {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
  }
  html body .build-column > .rune-block .rune-summary-row { grid-column: auto !important; grid-row: 1 !important; min-height: 70px !important; height: auto !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 20px auto !important; align-items: center !important; }
  html body .build-column > .rune-block .rune-summary-row > span { width: 28px !important; height: auto !important; }
  html body .build-column > .rune-block .rune-picks { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; max-height: 104px !important; overflow-y: auto !important; }
  html body .build-column > .rune-block .rune-picks > span { display: inline-flex !important; min-height: 32px !important; max-width: 100% !important; gap: 3px !important; }
  html body .build-column > .rune-block .rune-picks img { width: 26px !important; height: 26px !important; object-fit: contain !important; }
  html body .build-column > .rune-block .rune-picks .rune-name { white-space: normal !important; }
  html body .build-column > .rune-block .rune-picks :is(.rune-name, b) { font-size: 12px !important; }
  html body .build-column > .rune-block .rune-summary .stat-summary { position: relative !important; display: block !important; inset: auto !important; grid-column: 1 / -1 !important; grid-row: 2 !important; height: auto !important; margin: 0 !important; padding: 6px 0 !important; border: 0 !important; background: none !important; color: var(--phone-muted) !important; font-size: 12px !important; line-height: 20px !important; white-space: normal !important; }
  html body .build-column > .rune-block .rune-summary .stat-summary > b { display: inline !important; margin-right: 6px !important; white-space: nowrap !important; }
  html body .build-column > .build-skill-rank .stats-heading { display: flex !important; justify-content: space-between !important; margin: 0 0 4px !important; color: var(--phone-muted) !important; }
  html body .build-column > .build-skill-rank .stats-heading h3 { font-size: 13px !important; }
  html body .build-column > .build-skill-rank .stats-heading span { font-size: 11px !important; }
  html body .build-column > .build-skill-rank #skillRankControls {
    display: grid !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 96px !important;
    min-height: 96px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 48px !important;
    gap: 0 8px !important;
    align-items: center !important;
  }
  html body .build-column > .build-skill-rank .skill-rank-row { min-width: 0 !important; gap: 0 !important; justify-content: space-between !important; }
  html body .build-column > .build-skill-rank .skill-rank-row strong { white-space: nowrap !important; }
  html body .build-column > .build-skill-rank .skill-rank-row button { position: relative !important; width: 44px !important; height: 44px !important; min-width: 44px !important; border: 0 !important; background: none !important; isolation: isolate !important; }
  html body .build-column > .build-skill-rank .skill-rank-row button::before { position: absolute; inset: 8px; z-index: -1; border: 1px solid #99968c66; border-radius: 50%; background: #ffffff40; content: ''; }
  html body .build-column > .build-skill-rank .skill-rank-row output { min-width: 16px !important; }
  html body .build-column > .build-skill-rank .skill-rank-row small { display: none !important; }

  html body .build-column > .result-stats { padding: 20px var(--phone-pad) !important; background-size: 100% 100% !important; background-color: transparent !important; }
  html body .build-column > .result-stats .compact-stats { height: auto !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: 56px !important; }
  html body .build-column > .result-stats .compact-stats > div { min-width: 0 !important; border-right: 0 !important; }
  html body .build-column > .result-stats .compact-stats dt { white-space: normal !important; font-size: 11px !important; }
  html body .build-column > .result-stats .compact-stats dd { font-size: 18px !important; }

  html body .build-column > .combat-block { min-height: 210px !important; padding: 20px var(--phone-pad) !important; background-size: 100% 100% !important; background-color: transparent !important; }
  html body .build-column > .combat-block .combat-state-grid { overflow: visible !important; }
  html body .build-column > .combat-block .combat-state-toggle > span { font-size: 14px !important; color: var(--phone-ink) !important; }
  html body .build-column > .combat-block .combat-state-toggle > small { font-size: 12px !important; color: var(--phone-muted) !important; line-height: 18px !important; }
  html body .build-column > .target-block { padding: 20px var(--phone-pad) !important; background-size: 100% 100% !important; background-color: transparent !important; }
  html body .build-column > .target-block .target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  html body .build-column > .target-block .target-grid label:not(.duration-control) { min-width: 0 !important; }
  html body .build-column-loadout > .target-block .target-grid input[type="number"] { width: 100% !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; font-size: 16px !important; }
  html body .build-column > .target-block .duration-control { grid-column: 1 / -1 !important; min-width: 0 !important; }
  html body .build-column > .target-block .duration-segments button { min-height: 44px !important; }

  html body .output-summary > .damage-bars section > div { grid-template-columns: 62px minmax(0, 1fr) 50px !important; gap: 6px !important; }
  html body .output-summary > .damage-bars .damage-breakdown-legend { display: flex !important; flex-wrap: wrap !important; gap: 3px 8px !important; }
  html body .result-panel > .skill-block .skill-card-container { min-height: 64px !important; }
  html body .result-panel > .right-calculation-details #calculationBreakdown article > div { flex-wrap: wrap !important; }
  html body .result-panel { margin-top: var(--phone-gap) !important; }
  html body .result-panel > :is(.output-summary, .skill-block, .right-calculation-details) { padding: 20px var(--phone-pad) !important; background-size: 100% 100% !important; background-color: transparent !important; margin-bottom: var(--phone-gap) !important; }
  html body .result-panel > .output-summary { grid-template-rows: 42px 92px auto auto !important; }
  html body .result-panel > .output-summary > .summary-identity > div { display: grid !important; gap: 2px !important; text-align: right !important; }
  html body .result-panel > .output-summary > .summary-identity span { display: none !important; }
  html body .result-panel > .output-summary > .summary-identity strong { margin: 0 !important; font-size: 14px !important; line-height: 20px !important; color: var(--phone-ink) !important; }
  html body .result-panel > .output-summary > .summary-identity small { margin: 0 !important; font-size: 10px !important; }
  html body .result-panel .dps-result strong { font-family: 'Bebas Neue', 'Teko', sans-serif !important; font-size: 48px !important; }
  html body .result-panel .summary-total strong { font-family: 'Bebas Neue', 'Teko', sans-serif !important; font-size: 40px !important; }
  html body .result-panel > .output-summary > .result-metrics span { font-size: 11px !important; }
  html body .result-panel > .output-summary > .result-metrics strong { font-size: 16px !important; }
  html body .result-panel > .skill-block { min-height: 120px !important; }
  html body .result-panel > .skill-block .empty-skill-state { min-height: 36px !important; border: 0 !important; background: transparent !important; text-align: left !important; padding: 6px 0 !important; }
  html body .result-panel > .right-calculation-details { min-height: 0 !important; }
  html body .result-panel > .right-calculation-details #calculationBreakdown { margin-top: 12px !important; gap: 8px !important; }
  html body .result-panel > .right-calculation-details #calculationBreakdown article { padding: 4px 0 !important; }
  html body .result-panel > .right-calculation-details #calculationBreakdown article :is(span, b) { font-size: 12px !important; }
  html body .result-panel > .right-calculation-details #calculationBreakdown article p { font-size: 12px !important; line-height: 19px !important; }

  /* Nine-slice the ORIGINAL sheets: corners scale uniformly, while only the
   * edge strips and centre fill expand with mobile content. No asset edits. */
  html body .build-column > .hero-context-block {
    background: none !important;
    border-image: url('assets/porcelain-hero-context-no-tabs.webp') 64 fill / 24px / 0 stretch !important;
  }
  html body .build-column > .hero-context-block::after {
    background: none !important;
    border-image: url('assets/hero-context-corner-metal-overlay-right-edge-fix.png') 64 / 24px / 0 stretch !important;
  }
  /* Preserve the full horizontal sheet, not just its middle. The quiet
   * material at y=100–200 extends vertically; the top 100px and lower 840px
   * keep a uniform scale, including all side ornaments. Hide only the source
   * footer here: the real skill section below owns that same footer. */
  html body .build-column { --phone-sheet-pixel: calc((100vw - 24px) / 1600); }
  html body .build-column::before {
    grid-row: 2 / 4;
    height: calc(100% + var(--phone-sheet-pixel) * 140);
    background: none !important;
    border-image: url('assets/porcelain-build-panel-direct-ground-v6-continuous-clean.webp') 100 0 840 0 fill / calc(var(--phone-sheet-pixel) * 100) 0 calc(var(--phone-sheet-pixel) * 840) 0 / 0 stretch !important;
    clip-path: inset(0 0 calc(var(--phone-sheet-pixel) * 140));
  }
  html body .build-column::after {
    content: none;
  }
  html body .build-column > .build-skill-rank {
    isolation: isolate;
    background: none !important;
    border-image: none !important;
  }
  html body .build-column > .build-skill-rank::before {
    content: '';
    position: absolute;
    inset: calc(var(--phone-sheet-pixel) * -900) 0 0;
    z-index: -1;
    pointer-events: none;
    background: none;
    border-image: url('assets/porcelain-build-panel-direct-ground-v6-continuous-clean.webp') 920 0 60 0 fill / calc(var(--phone-sheet-pixel) * 920) 0 calc(var(--phone-sheet-pixel) * 60) 0 / 0 stretch;
    clip-path: inset(calc(var(--phone-sheet-pixel) * 900) 0 0);
  }
  html body .build-column > .result-stats,
  html body .result-panel > :is(.output-summary, .skill-block, .right-calculation-details) {
    background: none !important;
    border-image: url('assets/porcelain-result-panel-direct-ground-v6-top-panel-no-seams.webp') 64 fill / 16px / 0 stretch !important;
  }
  html body .build-column > .combat-block {
    background: none !important;
    border-image: url('assets/combat-state-baseplate.webp') 64 fill / 16px / 0 stretch !important;
  }
  html body .build-column > .target-block {
    background: none !important;
    border-image: url('assets/porcelain-result-panel-direct-ground-v6-top-panel-no-seams.webp') 64 fill / 16px / 0 stretch !important;
  }

  /* Context, full-size primary readings, auxiliary metrics, then breakdown. */
  html body .result-panel > .output-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: auto 92px auto auto !important; gap: 12px !important; padding: 18px var(--phone-pad) !important; }
  html body .result-panel > .output-summary > .summary-identity { display: none !important; }
  html body .result-panel > .output-summary > .result-header { grid-column: 1 / -1 !important; grid-row: 1 !important; height: auto !important; padding: 0 !important; }
  html body .result-panel > .output-summary > .result-header > div { display: flex !important; width: 100% !important; align-items: baseline !important; justify-content: space-between !important; gap: 12px !important; }
  html body .result-panel > .output-summary > .result-header h2 { font-size: 15px !important; }
  html body .result-panel > .output-summary > .result-header span { font-size: 11px !important; }
  html body .result-panel > .output-summary > :is(.dps-result, .summary-total) { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 0 !important; text-align: center !important; gap: 3px !important; }
  html body .result-panel > .output-summary > :is(.dps-result, .summary-total) > :is(strong, small, span:not(.result-delta)) { position: static !important; align-self: center !important; width: auto !important; margin: 0 !important; text-align: center !important; transform: none !important; }
  html body .result-panel > .output-summary > .result-metrics { grid-column: 1 / -1 !important; grid-row: 3 !important; min-height: 58px !important; padding: 0 0 12px !important; border-top: 0 !important; border-bottom: 1px solid #857f6c26 !important; }
  html body .result-panel > .output-summary > .result-metrics > div { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; justify-self: stretch !important; width: auto !important; padding: 0 4px !important; gap: 5px !important; }
  html body .result-panel > .output-summary > .damage-bars { grid-column: 1 / -1 !important; grid-row: 4 !important; min-height: 0 !important; height: auto !important; align-content: start !important; }
  html body .result-panel > .output-summary > .damage-bars section { gap: 10px !important; }
  html body .result-panel > .output-summary > .damage-bars section > header { align-items: center !important; font-size: 13px !important; }
  html body .result-panel > .output-summary > .damage-bars section > div { grid-template-columns: 64px minmax(0, 1fr) 62px !important; gap: 8px !important; min-height: 24px !important; font-size: 12px !important; }
  html body .result-panel > .output-summary > .damage-bars section > div > strong { font-size: 14px !important; }
  html body .result-panel > .output-summary > .damage-bars section > div > i { height: 7px !important; }
  html body .result-panel > :is(.skill-block, .right-calculation-details) { display: block !important; height: auto !important; min-height: 0 !important; padding: 18px var(--phone-pad) !important; }
  html body .result-panel > :is(.skill-block, .right-calculation-details) > header { height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 0 12px !important; }
  html body .result-panel > .skill-block > header > div { display: flex !important; align-items: baseline !important; gap: 10px !important; }
  html body .result-panel > .skill-block .skill-state-list { margin: 0 !important; }
  html body .result-panel > .skill-block .empty-skill-state { display: block !important; min-height: 0 !important; padding: 4px 0 !important; font-size: 12px !important; line-height: 20px !important; }
  html body .result-panel > .right-calculation-details #calculationBreakdown { display: grid !important; grid-template-rows: auto auto !important; margin: 0 !important; row-gap: 12px !important; }
  html body .result-panel > .right-calculation-details #calculationBreakdown article { display: grid !important; height: auto !important; min-height: 0 !important; align-content: start !important; gap: 5px !important; padding: 0 !important; }
  html body .result-panel > .right-calculation-details #calculationBreakdown article > div { height: auto !important; min-height: 0 !important; align-items: baseline !important; gap: 4px 12px !important; }
  html body .result-panel > .right-calculation-details #calculationBreakdown article :is(strong, b) { font-size: 12px !important; line-height: 18px !important; }
  html body .result-panel > .right-calculation-details #calculationBreakdown article p { margin: 0 !important; }

  html body #itemsDialog,
  html body #runesDialog { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; }
  html body #itemsDialog { height: calc(100dvh - 24px) !important; }
  html body #itemsDialog .dialog-shell { height: 100% !important; }
  html body #itemsDialog .dialog-toolbar { display: grid !important; grid-template-columns: 1fr !important; }
  html body #itemsDialog .search-control { width: 100% !important; }
  html body #itemsDialog .search-control input { width: 100% !important; min-height: 42px !important; font-size: 16px !important; }
  html body #itemsDialog .filter-tabs { display: flex !important; width: 100% !important; overflow-x: auto !important; flex-wrap: nowrap !important; white-space: nowrap !important; }
  html body #itemsDialog .filter-tabs button { flex: 0 0 auto !important; min-width: 44px !important; min-height: 44px !important; white-space: nowrap !important; }
  html body #itemsDialog .item-browser { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-width: 0 !important; min-height: 0 !important; }
  html body #itemsDialog .item-grid { display: grid !important; flex: 1 1 0 !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; grid-template-columns: 1fr !important; overflow-y: auto !important; }
  html body #itemsDialog .item-card-wrap { min-width: 0 !important; }
  html body #itemsDialog .item-card { min-width: 0 !important; padding-right: 54px !important; }
  html body #itemsDialog .item-card-detail {
    position: absolute !important;
    z-index: 2 !important;
    top: 8px !important;
    right: 4px !important;
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #775d49 !important;
    font-size: 11px !important;
  }
  html body #itemsDialog .item-card-detail:focus-visible { outline: 2px solid #8b674a !important; outline-offset: -2px !important; }
  html body #itemsDialog .item-inspector { display: none !important; }
  html body #itemsDialog .item-card-action .item-card-quantity button { width: 44px !important; height: 44px !important; }
  html body :is(#itemsDialog, #runesDialog, #itemDetailDialog) .dialog-header .close-button { min-height: 44px !important; }
  html body #runesDialog .rune-grid { grid-template-columns: 1fr !important; }
  html body #runesDialog .rune-row { min-width: 0 !important; }
  html body #runesDialog .rune-inline-counter { grid-column: 2 !important; width: 224px !important; max-width: 100% !important; grid-template-columns: 44px 44px 28px 44px 44px !important; column-gap: 3px !important; }
  html body #runesDialog .rune-inline-counter :is(button[data-rune-zero], button[data-rune-minus], button[data-rune-plus], button[data-rune-max]) { width: 44px !important; height: 44px !important; }
  html body #runesDialog .rune-inline-counter button[data-hint]::after {
    position: absolute !important;
    top: 34px !important;
    left: 50% !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #686762 !important;
    font-size: 9px !important;
    line-height: 12px !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: translateX(-50%) !important;
  }
  html body #runesDialog .rune-inline-counter button[data-rune-zero]::after { content: '清零' !important; }
  html body #runesDialog .rune-inline-counter button[data-rune-max]::after { content: '加满' !important; }
  html body #runesDialog .rune-inline-counter { padding-bottom: 13px !important; }
}

/* Compact visible controls with unchanged, non-overlapping 44px hit areas. */
@media (max-width: 600px) {
  html body { --phone-control-line: rgba(103, 100, 89, .30); --phone-control-paper: rgba(249, 248, 244, .72); }
  html body .build-column-loadout > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions) .boost-current,
  html body .build-column-loadout > :is(.equipment-block, .rune-block) > header > :is(#openItemsBtn, #openRunesBtn) {
    position: relative !important;
    isolation: isolate !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px !important;
  }
  html body .build-column-loadout > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions) .boost-current::before,
  html body .build-column-loadout > :is(.equipment-block, .rune-block) > header > :is(#openItemsBtn, #openRunesBtn)::before {
    content: '';
    position: absolute;
    inset: 6px 0;
    z-index: -1;
    border: 1px solid var(--phone-control-line);
    border-radius: 6px;
    background: var(--phone-control-paper);
    pointer-events: none;
  }
  html body .build-column-loadout > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions) .boost-current:is(:hover, :focus-visible)::before,
  html body .build-column-loadout > :is(.equipment-block, .rune-block) > header > :is(#openItemsBtn, #openRunesBtn):is(:hover, :focus-visible)::before {
    border-color: rgba(91, 89, 80, .50);
    background: #fffefa;
  }
  html body #itemsDialog .item-card-action .item-card-quantity button,
  html body #runesDialog .rune-inline-counter button:is([data-rune-minus], [data-rune-plus]) {
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }
  html body #itemsDialog .item-card-action .item-card-quantity button::before,
  html body #runesDialog .rune-inline-counter button:is([data-rune-minus], [data-rune-plus])::before {
    content: '';
    position: absolute;
    inset: 9px;
    z-index: -1;
    border: 1px solid var(--phone-control-line);
    border-radius: 50%;
    background: var(--phone-control-paper);
    pointer-events: none;
  }
  html body #itemsDialog .item-card-action .item-card-quantity button:is(:hover, :focus-visible):not(:disabled)::before,
  html body #runesDialog .rune-inline-counter button:is([data-rune-minus], [data-rune-plus]):is(:hover, :focus-visible):not(:disabled)::before { border-color: #8e8678; background: #fffefa; }
  html body #runesDialog .rune-inline-counter { width: 204px !important; column-gap: 0 !important; }
  html body #runesDialog .rune-row { min-height: 96px !important; row-gap: 0 !important; }
  html body #runesDialog .rune-inline-counter { padding-bottom: 4px !important; }
  html body #runesDialog .rune-inline-counter button:is([data-rune-zero], [data-rune-max]) { font-size: 16px !important; }
  html body #runesDialog .rune-inline-counter output { font-size: 14px !important; }
  /* Keep the detail action beside the copy, clear of the vertical stepper. */
  html body #itemsDialog .item-card-detail { top: auto !important; bottom: 0 !important; left: 54px !important; right: auto !important; }
  html body :is(#itemsDialog, #runesDialog, #itemDetailDialog) .dialog-header .close-button {
    position: relative !important;
    isolation: isolate !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body :is(#itemsDialog, #runesDialog, #itemDetailDialog) .dialog-header .close-button::before {
    content: '';
    position: absolute;
    inset: 5px 0;
    z-index: -1;
    background: #85644c;
    border-radius: 6px;
    pointer-events: none;
  }
  html body :is(#itemsDialog, #runesDialog, #itemDetailDialog) .dialog-header .close-button:is(:hover, :focus-visible)::before { background: #6e503d; }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  html body .mobile-result-summary .result-delta { animation: none; opacity: 1; }
}
@media (max-width: 600px) and (forced-colors: active) {
  html body .mobile-result-summary :is(strong, .result-delta) { color: CanvasText !important; }
}

@media (min-width: 1001px) and (max-width: 1150px) {
  html body .build-column > .equipment-block .equipment-slot > .item-proc-control > .item-counter-label {
    min-height: 24px !important;
    align-content: center !important;
  }
  html body .build-column:has(> .equipment-block .item-proc-control) > .rune-block > :is(header, .rune-summary) {
    translate: 0 14px !important;
  }
}

@media (min-width: 1001px) and (max-width: 1150px) {
  html body .build-column > .equipment-block .equipment-slot > .item-proc-control > .item-counter-label {
    min-height: 24px !important;
    align-content: center !important;
  }
  html body .build-column:has(> .equipment-block .item-proc-control) > .rune-block > :is(header, .rune-summary) {
    translate: 0 14px !important;
  }
}

@media (min-width: 601px) and (max-width: 1000px) {
  html body .build-column > .equipment-block:has(.item-proc-control) .equipment-main > b {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 32px !important;
    gap: 0 !important;
    transform: none !important;
  }
  html body .build-column > .equipment-block:has(.item-proc-control) .equipment-main > b em {
    flex: none !important;
    overflow: visible !important;
    line-height: 18px !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  html body .build-column > .equipment-block:has(.item-proc-control) .equipment-main > b small {
    flex: none !important;
    line-height: 14px !important;
  }
  html body .build-column > .equipment-block .equipment-slot > .item-proc-control {
    top: 172px !important;
  }
  /* Make room inside the existing shared board; its artwork and footer stay fixed. */
  html body .build-column:has(> .equipment-block .item-proc-control) > .rune-block > :is(header, .rune-summary) {
    translate: 0 14px !important;
  }
}

@media (max-width: 600px) {
  html body .build-column > .equipment-block .equipped-row:has(.item-proc-control) {
    grid-template-rows: repeat(2, 184px) !important;
  }
  html body .build-column > .equipment-block .equipped-row:has(.item-proc-control) > .equipment-slot {
    height: 184px !important;
    min-height: 184px !important;
  }
  html body .build-column > .equipment-block .equipment-slot > .item-proc-control {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    min-height: 60px !important;
  }
  html body .build-column > .equipment-block .item-proc-control .item-counter-stepper {
    max-width: 100px !important;
    height: 44px !important;
  }
  html body .build-column > .equipment-block .equipment-slot > .item-proc-control > .item-counter-label {
    font-size: 10px !important;
  }
  html body .build-column > .equipment-block .item-counter-stepper > :is(button, input) {
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
  }
  html body .build-column > .equipment-block .item-counter-stepper > button::before {
    width: min(20px, 100%);
  }
}