/* Desktop composition of the first approved preview (1511 x 1041).
   Native nodes still own every value, action, cooldown and drag state. */
@media (min-width: 1001px) {
  app-game-shell {
    --d-slot: 50px; --d-mini: 38px; --d-gap: 6px; --d-side: 274px;
    --d-core: 156px; --d-ring: 146px; --d-orb: 120px; --d-w: 744px; --d-h: 180px;
    --hud-edge: 4px; --hud-chat-width: 322px; --hud-map-width: 222px;
    --oh-text: #d5d7da; --oh-text-2: #bac4d5; --oh-text-3: #929cae;
    --oh-bright: #f2f1ee; --oh-gold: #dfbd68; --oh-gold-3: #f5d779;
    --oh-line: #555858; --oh-line-2: #afb9c9;
  }
  app-game-shell :is(#ombria-top, #ombria-right, #ombria-cta, .footer-hud, .chat-panel),
  app-game-shell > header { letter-spacing: 0; }
  app-game-shell :is(#oh-shade-top, #oh-shade-bottom) { display: none; }

  /* The top grid reserves the menu's measured width, including optional party controls. */
  app-game-shell > header {
    position: absolute; inset: 5px auto auto var(--hud-edge); z-index: 9;
    display: grid; grid-template-columns: auto 146px; gap: 28px;
    width: max-content; min-height: 120px; padding: 16px 18px; box-sizing: border-box;
    border: 0; border-radius: 0; background: #101416; box-shadow: 0 2px 4px #0008;
  }
  app-game-shell #top-nav.top-nav {
    display: grid !important; grid-template-columns: repeat(4, 42px); grid-auto-rows: 40px;
    gap: 8px 4px; padding: 0; margin: 0;
  }
  app-game-shell #top-nav.top-nav:has(#nav-party:not([hidden])),
  app-game-shell #top-nav.top-nav:has(#nav-pip:not([hidden])) { grid-template-columns: repeat(5, 42px); }
  app-game-shell #top-nav .nav-labeled {
    width: 42px; height: 40px; padding: 0; border: 0; border-radius: 3px;
    background: #14191d; box-shadow: inset 0 0 0 1px #928777;
  }
  app-game-shell #top-nav .nav-label { letter-spacing: 0; }
  app-game-shell .header-purse {
    position: relative; display: grid; grid-template-rows: 24px 24px 34px; gap: 3px;
    width: 146px; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; border: 0; border-image: none;
  }
  app-game-shell .header-purse::before {
    content: ""; position: absolute; top: -4px; bottom: -4px; left: -16px;
    width: 1px; background: #767363; box-shadow: 2px 0 #050608;
  }
  app-game-shell .header-purse :is(.header-coin-group, #header-coins, #header-gold) { width: 100%; gap: 8px; height: 24px; }
  app-game-shell .header-purse :is(.header-coins-count, .header-gold-count) { margin-left: auto; font: 700 14px/1 var(--oh-ui); font-variant-numeric: tabular-nums; }
  app-game-shell .header-purse #header-gold { padding-right: 34px; box-sizing: border-box; }
  app-game-shell .header-purse #header-coins-buy {
    flex: none; width: 23px; height: 23px; margin: 0 0 0 3px; padding: 0;
    font-size: 18px; border: 1px solid #b8a474; background: #11171b; box-shadow: inset 0 0 0 2px #050708;
  }
  app-game-shell .header-purse #nav-store { box-sizing: border-box; width: 100%; height: 34px; padding: 0 10px; gap: 9px; border: 0; border-radius: 0; background: #d9b14e; box-shadow: inset 0 0 0 2px #92763a; }
  app-game-shell .header-purse #nav-store .nav-label { font: 800 14px/1 var(--oh-ui); letter-spacing: 0; color: #171810; }
  app-game-shell .header-purse #nav-store .nav-glyph { width: 30px; height: 27px; }
  app-game-shell .header-purse #nav-store .nav-glyph-art { max-width: 30px; max-height: 27px; }
  app-game-shell #ombria-top {
    position: absolute; inset: 5px var(--hud-edge) auto calc(var(--hud-menu-edge, 394px) + 12px);
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start;
    z-index: 9; pointer-events: none;
  }
  app-game-shell #ombria-top > #ombria-ident {
    position: relative; inset: auto; transform: none; justify-self: center;
    width: 384px; max-width: 100%; min-height: 70px; padding: 13px 20px 12px;
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    border: 0; border-radius: 0; background: #101416; box-shadow: 0 2px 4px #0008; pointer-events: auto;
  }
  app-game-shell #ombria-top .header-character { width: 100%; min-height: 25px; margin: 0; gap: 8px; }
  app-game-shell #ombria-top .header-character-id { flex: 1 1 auto; flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  app-game-shell #ombria-top .header-character-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 20px/1 var(--oh-num); text-transform: uppercase; letter-spacing: 0; }
  app-game-shell #ombria-top .header-character-vocation { flex: none; }
  app-game-shell #ombria-top .header-character-vocation em { display: inline-flex; gap: 4px; font-size: 10px; letter-spacing: 0; }
  app-game-shell #ombria-top #header-portrait { width: 28px; height: 28px; }
  app-game-shell #ombria-top #header-portrait canvas { width: 26px; height: 26px; }
  app-game-shell #ombria-top #header-exp-rate { padding: 4px 5px; font-size: 10px; letter-spacing: 0; }
  app-game-shell #ombria-top .header-online { display: flex; font-size: 14px; }
  app-game-shell #ombria-top .release-phase { display: none; }
  app-game-shell #ombria-top #ombria-local {
    position: relative; inset: auto; display: grid; width: 100%; padding: 15px 17px 18px;
    gap: 10px; min-height: 158px; border: 0; border-radius: 0; background: #101416;
    box-shadow: 0 2px 4px #0008; pointer-events: auto;
  }
  app-game-shell #ombria-local .ol-title { font-size: 11px; letter-spacing: 0; }
  app-game-shell #ombria-local .hud-city-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; }
  app-game-shell #ombria-local .hud-city-action { height: 30px; padding: 0 4px; font: 600 12px/1 var(--oh-ui); letter-spacing: 0; }
  app-game-shell #ombria-local.no-bless::after { font-size: 10px; }

  /* Native chat inline geometry wins after the player drags or resizes it. */
  app-game-shell :is(#ui, #game) .chat-panel {
    border: 0; border-radius: 0; background: #101416 !important; box-shadow: 0 2px 4px #0008;
    padding: 9px 10px 11px; box-sizing: border-box;
  }
  app-game-shell .chat-panel:not([style*="left"]) { inset: auto auto 6px var(--hud-edge); }
  app-game-shell .chat-panel:not([style*="width"]) { width: var(--hud-chat-width); }
  app-game-shell .chat-panel:not([style*="height"]):not(.folded) { height: 195px; }
  app-game-shell .chat-panel > header { height: 24px; flex: 0 0 24px; padding: 0; background: none !important; border: 0 !important; }
  app-game-shell .chat-panel > header::before { top: 4px; height: 2px; }
  app-game-shell .chat-panel > header .window-actions { margin-top: 0; display: flex; align-items: center; gap: 4px; }
  .oh-reference-art app-game-shell .chat-panel > header .window-actions button { width: 24px; height: 24px; min-width: 24px; min-height: 24px; font-size: 16px; }
  app-game-shell .chat-tabs { height: 24px; min-height: 24px; padding: 0 2px; gap: 2px; }
  app-game-shell .chat-tab { height: 24px; padding: 0 10px; font-size: 12px; letter-spacing: 0; }
  app-game-shell .chat-messages { padding: 5px 7px; font-size: 13px; line-height: 1.2; }
  app-game-shell .chat-compose { height: 28px; min-height: 28px; padding: 0 4px; gap: 6px; }
  app-game-shell .chat-compose input { min-width: 0; font-size: 12px; }
  app-game-shell .chat-compose button { height: 27px; padding: 0 10px; font-size: 13px; }
  app-game-shell #ombria-cta {
    position: absolute; left: var(--hud-edge); width: 315px; height: 103px;
    display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center;
    gap: 12px; padding: 15px 34px 15px 21px; border: 0; border-radius: 0;
    background: #101416; box-shadow: 0 2px 4px #0008;
  }
  app-game-shell #ombria-cta::before { content: none; }
  app-game-shell #ombria-cta::after { right: 26px; opacity: 1; color: #f3d571; }
  app-game-shell #ombria-cta .cta-chev { width: 68px; height: 68px; background: #15191b; box-shadow: inset 0 0 0 2px #d3b46b; }
  app-game-shell #ombria-cta .cta-chev img { width: 49px; height: 49px; }
  app-game-shell #ombria-cta .cta-txt { gap: 3px; }
  app-game-shell #ombria-cta .cta-eyebrow { font-size: 13px; letter-spacing: 0; }
  app-game-shell #ombria-cta .cta-title { font: 700 30px/1 var(--oh-num); letter-spacing: 0; }
  app-game-shell #ombria-cta .cta-sub { font-size: 11px; }
  app-game-shell #ombria-cta[data-mode="hunt"] .cta-title { font-size: 24px; }

  /* The rail centre must stay transparent: Phaser paints the live minimap behind it. */
  app-game-shell #ombria-right {
    position: absolute; inset: auto var(--hud-edge) 6px auto; width: var(--hud-map-width);
    display: grid; grid-template-rows: 128px auto 32px; gap: 4px;
    padding: 14px 16px 12px; box-sizing: border-box; border: 0; background: transparent;
  }
  app-game-shell #ombria-right > .hud-preset-rail {
    display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: 20px 26px 26px 30px;
    gap: 6px 4px; width: 100%; padding: 0; border: 0; border-radius: 0; background: #101416;
  }
  app-game-shell #ombria-right > .hud-preset-rail::before { font-size: 12px; letter-spacing: 0; color: #f5d779; }
  app-game-shell #ombria-right > .hud-preset-rail::after { font-size: 12px; letter-spacing: 0; color: #ccc9bb; padding-left: 19px; background-size: 12px 12px; }
  app-game-shell #ombria-right .hud-preset-label { font-size: 9px; letter-spacing: 0; }
  app-game-shell #ombria-right :is(.hud-preset-select, .hud-target-strategy) { height: 26px; padding: 0 5px; font: 600 12px/1 var(--oh-ui); }
  app-game-shell #ombria-right .hud-rail-controls { gap: 6px; }
  app-game-shell #ombria-right .hud-stances { display: flex; gap: 3px; }
  app-game-shell #ombria-right .hud-stance { width: 27px; height: 29px; font-size: 16px; }
  app-game-shell #ombria-right .hud-distance-row { gap: 2px; }
  app-game-shell #ombria-right .hud-distance-step { width: 22px; height: 25px; font-size: 16px; }
  app-game-shell #ombria-right .hud-distance-value { width: 42px; height: 25px; padding-right: 20px; font-size: 13px; }
  app-game-shell #ombria-right .hud-distance-step[data-step="1"]::before { top: 8px; font-size: 9px; }
  app-game-shell #oc-box { height: auto; aspect-ratio: 1; width: 100%; box-shadow: none; border: 1px solid #686555; }
  app-game-shell #ombria-right.has-map #oc-box { background: transparent; box-shadow: inset 0 0 5px #0008; }
  app-game-shell #oc-strip { height: 32px; justify-content: center; padding: 0 25px; overflow: hidden; border: 0; background: #101416; font-size: 12px; }
  app-game-shell #oc-strip .oc-ico { display: none; }
  app-game-shell #oc-strip .oc-text { min-width: 0; text-overflow: ellipsis; overflow: hidden; }
  app-game-shell #ombria-right.has-map #oc-box .mm-zoom { display: flex; flex-direction: row-reverse; position: absolute; inset: auto 0 -34px; justify-content: space-between; pointer-events: none; }
  app-game-shell #oc-box:has(.mm-zoom) { overflow: visible; }
  app-game-shell #oc-box .mm-zoom button { width: 22px; height: 24px; font-size: 15px; pointer-events: auto; }

  /* A grid owns the action bar; all twenty original buttons retain DOM order. */
  app-game-shell .footer-hud { left: 50% !important; right: auto !important; top: auto !important; bottom: 0 !important; width: var(--d-w) !important; transform: translateX(-50%); }
  app-game-shell .hud-bar-panel { position: relative; display: block; width: var(--d-w); height: var(--d-h); padding: 0; }
  app-game-shell .hud-bar-panel::before { inset: 42px 0 auto; width: auto; height: 108px; border: 0; border-radius: 0; background: #101416; box-shadow: 0 2px 4px #0008; }
  app-game-shell .hud-slots {
    position: absolute; inset: 6px 20px auto; width: auto; display: grid;
    grid-template-columns: repeat(5, var(--d-slot)) minmax(0, 1fr) repeat(5, var(--d-slot));
    grid-template-rows: var(--d-mini) 28px var(--d-slot); gap: 4px var(--d-gap);
    padding: 0; margin: 0; pointer-events: none;
  }
  app-game-shell .hud-slots .hud-slot {
    position: relative; inset: auto; grid-row: 3; width: var(--d-slot); height: var(--d-slot);
    margin: 0; padding: 0; border: 0; border-radius: 4px; background: #15181b !important;
    color: #becadd; pointer-events: auto; box-shadow: inset 0 0 0 1px #817d70; font: 500 25px/1 var(--oh-ui);
  }
  app-game-shell .hud-slots .hud-slot:nth-child(1) { grid-column: 1; }
  app-game-shell .hud-slots .hud-slot:nth-child(2) { grid-column: 2; }
  app-game-shell .hud-slots .hud-slot:nth-child(3) { grid-column: 3; }
  app-game-shell .hud-slots .hud-slot:nth-child(4) { grid-column: 4; }
  app-game-shell .hud-slots .hud-slot:nth-child(5) { grid-column: 5; }
  app-game-shell .hud-slots .hud-slot:nth-child(6) { grid-column: 7; }
  app-game-shell .hud-slots .hud-slot:nth-child(7) { grid-column: 8; }
  app-game-shell .hud-slots .hud-slot:nth-child(8) { grid-column: 9; }
  app-game-shell .hud-slots .hud-slot:nth-child(9) { grid-column: 10; }
  app-game-shell .hud-slots .hud-slot:nth-child(10) { grid-column: 11; }
  app-game-shell .hud-slots .hud-slot:nth-child(n + 11) {
    grid-row: 1; grid-column: 1 / 6; justify-self: end; width: var(--d-mini); height: var(--d-mini); font-size: 24px;
    translate: calc((var(--mini-index) - 4) * (var(--d-mini) + 4px)) 0;
  }
  app-game-shell .hud-slots .hud-slot:nth-child(n + 16) { grid-column: 7 / 12; justify-self: start; translate: calc(var(--mini-index) * (var(--d-mini) + 4px)) 0; }
  app-game-shell .hud-slot:is(:nth-child(11), :nth-child(16)) { --mini-index: 0; }
  app-game-shell .hud-slot:is(:nth-child(12), :nth-child(17)) { --mini-index: 1; }
  app-game-shell .hud-slot:is(:nth-child(13), :nth-child(18)) { --mini-index: 2; }
  app-game-shell .hud-slot:is(:nth-child(14), :nth-child(19)) { --mini-index: 3; }
  app-game-shell .hud-slot:is(:nth-child(15), :nth-child(20)) { --mini-index: 4; }
  app-game-shell .hud-slots .hud-slot::after {
    content: ""; position: absolute; inset: 0; border: 0; border-radius: 0;
    background: none; border-image: var(--hud-ref-slot) 7 / 7px / 0 stretch; pointer-events: none;
  }
  app-game-shell .hud-slots .hud-slot:is(.active-rule, .selected) { box-shadow: inset 0 0 0 3px #e5c278; }
  app-game-shell .hud-slots .hud-slot.assigned.missing-item { box-shadow: inset 0 0 0 3px #ed828d; }
  app-game-shell .hud-slot .slot-count { font-size: 11px; }
  app-game-shell .hud-slot .slot-cooldown { border-radius: 4px; }
  app-game-shell .hud-bar-vitals { position: absolute; inset: 26px auto auto 50%; width: var(--d-ring); height: 138px; margin-left: calc(var(--d-ring) / -2); display: block !important; }
  app-game-shell .hud-bar-panel .hud-exp { inset: 0; width: 100%; height: 100%; }
  app-game-shell .hud-bar-panel .hud-exp::before { inset: 0; border-radius: 0; background: var(--hud-ref-ring) center / 100% 100% no-repeat; mask: none; -webkit-mask: none; }
  app-game-shell .hud-bar-panel .hud-exp::after {
    mask: radial-gradient(ellipse closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px) calc(100% - 1px), transparent 100%);
    -webkit-mask: radial-gradient(ellipse closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px) calc(100% - 1px), transparent 100%); filter: none;
  }
  app-game-shell .hud-bar-panel .hud-exp .hud-level {
    inset: -24px auto auto 50%; width: 40px; height: 40px; margin-left: -20px;
    background: #101518; color: #f5d779; font-size: 17px; box-shadow: 0 0 0 2px #ad954f, 0 0 0 4px #11191b;
  }
  app-game-shell .hud-bar-panel .hud-exp .hud-exp-percent { top: 122px; height: 22px; padding: 0 9px; font-size: 13px; border-radius: 12px; background: #101518; color: #f5d779; letter-spacing: 0; }
  app-game-shell .hud-bar-panel .hud-bar.hud-hp {
    inset: 9px auto auto 50%; width: var(--d-orb); height: var(--d-orb); margin-left: calc(var(--d-orb) / -2);
    box-shadow: inset 0 0 0 1px #c8bfa6, inset 0 0 12px #0009;
  }
  app-game-shell .hud-bar-panel .hud-bar.hud-hp .fill { background: radial-gradient(ellipse at 50% 80%, #b7293b, #96182a 55%, #591420); }
  app-game-shell .hud-bar-panel .hud-bar.hud-hp > span b { font: 700 30px/1 var(--oh-num); letter-spacing: 0; }
  app-game-shell .hud-bar-panel .hud-bar.hud-hp > span small { font-size: 12px; }
  app-game-shell .hud-bar-panel .hud-bar.hud-mp { left: calc((var(--d-w) - var(--d-ring)) / -2 + 54px); top: 32px; width: calc(var(--d-side) - 120px); height: 12px; }
  app-game-shell .hud-bar-panel .hud-bar.hud-mp::before { left: -30px; font-size: 11px; letter-spacing: 0; }
  app-game-shell .hud-bar-panel .hud-bar.hud-mp .fill { background: linear-gradient(#8de5fc, #25c6ed 40%, #0578a9); box-shadow: none; }
  app-game-shell .hud-bar-panel .hud-bar.hud-mp > span b { font-size: 13px; }
  app-game-shell .hud-bar-panel .hud-bar.hud-mp > span small { font-size: 12px; }
  app-game-shell .hud-bar-panel .hud-stamina { left: calc(var(--d-ring) / 2 + var(--d-w) / 2 - var(--d-side) - 20px + 78px); top: 32px; width: calc(var(--d-side) - 128px); height: 12px; }
  app-game-shell .hud-bar-panel .hud-stamina::before { left: -78px; top: -1px; width: 14px; height: 14px; }
  app-game-shell .hud-bar-panel .hud-stamina::after { left: -60px; top: 0; font-size: 10px; letter-spacing: 0; }
  app-game-shell .hud-bar-panel .hud-stamina .fill { background: linear-gradient(#9ce9d9, #48dbc1 45%, #1da896); box-shadow: none; }
  app-game-shell .hud-bar-panel .hud-stamina .hud-stamina-clock { font-size: 12px; }
  app-game-shell .hud-bar-panel .hud-stamina-buy { left: calc(var(--d-ring) / 2 + var(--d-w) / 2 - 8px); top: 30px; }
  app-game-shell .hud-bar-vitals > .hud-bag-buttons { left: calc(var(--d-ring) / 2 + var(--d-w) / 2 - 8px); top: 54px; gap: 4px; }
  app-game-shell .hud-bar-panel .hud-bag-button { width: 54px; height: 50px; }
  app-game-shell .hud-bar-panel .hud-status-strip { top: -35px; }
  app-game-shell .hud-bar-panel .hud-bar.hud-hp.hit { box-shadow: inset 0 0 0 2px #ffc3c3, 0 0 15px #ec4259aa; }
  app-game-shell .hud-bar-panel .hud-bar.hud-hp.heal { box-shadow: inset 0 0 0 2px #c8f7ca, 0 0 15px #6be889aa; }

  /* The artwork owns the entire silhouette, including its transparent corners.
     Do not clip the controls: chat handles, tooltips and alerts extend outside. */
  .oh-reference-art app-game-shell > header,
  .oh-reference-art app-game-shell #ombria-top > #ombria-ident,
  .oh-reference-art app-game-shell #ombria-top > #ombria-local,
  .oh-reference-art app-game-shell #ombria-cta,
  .oh-reference-art app-game-shell :is(#ui, #game) .chat-panel,
  .oh-reference-art app-game-shell .hud-bar-panel::before {
    border-image: var(--hud-ref-panel) 20 fill / 20px / 0 stretch;
    background: none !important; box-shadow: none;
  }
  .oh-reference-art app-game-shell > header { border-image-source: var(--hud-ref-menu); }
  .oh-reference-art app-game-shell #ombria-top > #ombria-ident { border-image-source: var(--hud-ref-identity); }
  .oh-reference-art app-game-shell #ombria-top > #ombria-local { border-image-source: var(--hud-ref-local); }
  .oh-reference-art app-game-shell :is(#ui, #game) .chat-panel { border-image-source: var(--hud-ref-chat); }
  .oh-reference-art app-game-shell .hud-bar-panel::before { border-image-source: var(--hud-ref-dock); }
  .oh-reference-art app-game-shell #ombria-right > .hud-preset-rail,
  .oh-reference-art app-game-shell #oc-strip { background: var(--hud-ref-texture) repeat; }
  .oh-reference-art app-game-shell #ombria-right > .hud-preset-rail { padding: 6px 4px 0; }
  .oh-reference-art app-game-shell #ombria-right .hud-distance-value { width: 36px; }
  .oh-reference-art app-game-shell .header-purse #nav-store .nav-glyph { flex: none; width: 26px; height: 26px; background: none; }
  .oh-reference-art app-game-shell .header-purse #nav-store .nav-glyph-art { visibility: visible; width: 26px; height: 26px; max-width: 100%; max-height: 100%; object-fit: contain; }
  .oh-reference-art app-game-shell #ombria-right::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 0; border-image: var(--hud-ref-map) 20 16 / 20px 16px / 0 stretch; pointer-events: none; }
  .oh-reference-art app-game-shell #ombria-cta .cta-chev { background: var(--hud-ref-hunt) center / contain no-repeat; box-shadow: none; }
  .oh-reference-art app-game-shell #ombria-cta .cta-chev img { visibility: hidden; }
  .oh-reference-art app-game-shell #top-nav #nav-prey { background: var(--hud-ref-prey) center / 100% 100% no-repeat; }
  .oh-reference-art app-game-shell #top-nav #nav-friends { background: var(--hud-ref-vip) center / 100% 100% no-repeat; }
  .oh-reference-art app-game-shell #top-nav #nav-guild { background: var(--hud-ref-guild) center / 100% 100% no-repeat; }
  .oh-reference-art app-game-shell #top-nav #nav-cyclopedia { background: var(--hud-ref-wiki) center / 100% 100% no-repeat; }
  .oh-reference-art app-game-shell #top-nav #nav-highscores { background: var(--hud-ref-ranking) center / 100% 100% no-repeat; }
  .oh-reference-art app-game-shell #top-nav #nav-ticket { background: var(--hud-ref-ticket) center / 100% 100% no-repeat; }
  .oh-reference-art app-game-shell #top-nav #nav-referral { background: var(--hud-ref-referral) center / 100% 100% no-repeat; }
  .oh-reference-art app-game-shell #top-nav #nav-options { background: var(--hud-ref-options) center / 100% 100% no-repeat; }
  .oh-reference-art app-game-shell #top-nav :is(#nav-prey, #nav-friends, #nav-guild, #nav-cyclopedia, #nav-highscores, #nav-ticket, #nav-referral, #nav-options) { box-shadow: none; }
  .oh-reference-art app-game-shell #top-nav :is(#nav-prey, #nav-friends, #nav-guild, #nav-cyclopedia, #nav-highscores, #nav-ticket, #nav-referral, #nav-options) .nav-glyph { visibility: hidden; }
  app-game-shell :is(#ombria-local .hud-city-action, #ombria-right select, #ombria-right .hud-stance, #ombria-right .hud-distance-step, #oc-box .mm-zoom button, .chat-compose button, .hud-bag-button) {
    border: 0; border-radius: 0; background: #13181b; border-image: var(--hud-ref-button) 6 7 fill / 6px 7px / 0 stretch;
    color: var(--oh-bright); text-shadow: 0 1px 2px #000; letter-spacing: 0;
  }
  app-game-shell :is(#ombria-right .hud-stance, #ombria-right .hud-distance-step, .hud-bag-button) { border-image: var(--hud-ref-slot) 7 fill / 6px / 0 stretch; }
  app-game-shell .header-purse #nav-store { border-image: var(--hud-ref-gold) 6 7 fill / 6px 7px / 0 stretch; }
  app-game-shell #ombria-local .hud-city-action::after { content: none; }
  app-game-shell #ombria-local .hud-city-action:hover:not(:disabled) { background: #13181b; filter: brightness(1.2); }
  app-game-shell #ombria-local .hud-city-action:disabled { opacity: .45; filter: grayscale(.7); }
  .oh-reference-art app-game-shell :is(#ombria-local .hud-city-action, #ombria-right select, #ombria-right .hud-distance-step, #oc-box .mm-zoom button, .chat-compose button, .hud-bag-button),
  .oh-reference-art app-game-shell #ombria-local .hud-city-action:hover:not(:disabled),
  .oh-reference-art app-game-shell .header-purse #nav-store { background: none; }
  .oh-reference-art app-game-shell .header-purse #nav-store { box-shadow: none; }
  .oh-reference-art app-game-shell .hud-slots .hud-slot {
    background: none !important; border-image: var(--hud-ref-slot) 7 fill / 7px / 0 stretch;
  }
  app-game-shell #ombria-right .hud-stance.active { box-shadow: inset 0 0 0 2px #d6b35f; }
  .oh-reference-art app-game-shell #ombria-right .hud-stance {
    background: var(--hud-stance-art) center / 20px 20px no-repeat,
      linear-gradient(#13181b, #13181b) center / calc(100% - 12px) calc(100% - 12px) no-repeat;
    border-image-slice: 7;
  }
  .oh-reference-art app-game-shell #ombria-right .hud-stance[data-stance="defensive"] { --hud-stance-art: var(--hud-ref-defense); }
  .oh-reference-art app-game-shell #ombria-right .hud-stance[data-stance="balanced"] { --hud-stance-art: var(--hud-ref-balanced); }
  .oh-reference-art app-game-shell #ombria-right .hud-stance[data-stance="aggressive"] { --hud-stance-art: var(--hud-ref-attack); }
  .oh-reference-art app-game-shell #ombria-right .hud-stance img { visibility: hidden; }
  app-game-shell #ombria-right select option { background: #121518; color: #f0f0ed; }
  app-game-shell :is(#top-nav, .header-purse, #ombria-ident, #ombria-local, #ombria-right, .footer-hud) :is(button, select, input):focus-visible,
  app-game-shell :is(#ombria-cta, #ombria-ident):focus-visible { outline: 2px solid #f1ce80; outline-offset: 3px; }
}
@media (min-width: 1001px) and (max-width: 1399px) {
  app-game-shell { --d-slot: 44px; --d-mini: 34px; --d-side: 244px; --d-w: 684px; --hud-chat-width: 270px; --hud-map-width: 204px; }
  app-game-shell #ombria-top { grid-template-columns: minmax(0, 1fr) 280px; }
  app-game-shell #ombria-top > #ombria-ident { padding-inline: 14px; }
  app-game-shell #ombria-top .header-character-name { font-size: 17px; }
  app-game-shell #ombria-top .header-online { font-size: 12px; }
  app-game-shell #ombria-cta { width: 270px; padding-left: 15px; grid-template-columns: 56px minmax(0, 1fr); gap: 9px; }
  app-game-shell #ombria-cta .cta-chev { width: 56px; height: 56px; }
  app-game-shell #ombria-cta .cta-title { font-size: 26px; }
  app-game-shell #ombria-right { padding-inline: 12px; }
  app-game-shell #ombria-right .hud-stance { width: 24px; }
  app-game-shell .chat-tab { padding-inline: 7px; font-size: 11px; }
}
@media (min-width: 1001px) and (max-width: 1240px) {
  app-game-shell #ombria-top { left: 4px; }
  app-game-shell #ombria-top > #ombria-ident { position: absolute; top: 128px; left: 50%; transform: translateX(-50%); width: 384px; }
  app-game-shell #ombria-top > #ombria-local { grid-column: 2; }
  app-game-shell .chat-panel:not([style*="left"]) { bottom: 180px; }
  app-game-shell #ombria-right { bottom: 180px; }
  app-game-shell .system-toasts { top: 210px !important; }
}
@media (prefers-reduced-motion: reduce) {
  app-game-shell :is(.hud-slot, #top-nav .nav-labeled, #ombria-cta) { transition: none; }
}

/* Preserve the shipped mobile theme; this reconstruction changes desktop only. */
@media (max-width: 1000px) {
  app-game-shell {
    --hud-art-frame: url('/ombria/hud/panel-gpt-5cb181ada6f7.webp');
    --hud-art-slot: url('/ombria/hud/slot-gpt-ecde7cfcc90f.webp');
    --hud-art-dark-button: url('/ombria/hud/button-gpt-bff8aaf7cf5f.webp');
    --hud-art-button: url('/ombria/auth/button-gpt-9d90cb399adc.webp');
  }

  /* A paleta fica nos controles do HUD; nao muda as janelas do jogo. */
  app-game-shell > header,
  app-game-shell :is(#ombria-top, #ombria-right, #ombria-cta, .footer-hud, .chat-panel, #ohm-local, #ohm-combat) {
    --oh-text: #d4d5d7;
    --oh-text-2: #b5bbc2;
    --oh-text-3: #959da6;
    --oh-bright: #f0f0ed;
    --oh-gold: #dfbe76;
    --oh-gold-3: #f1ce80;
    --oh-line: #575957;
    --oh-line-2: #989c9e;
    --oh-ink-1: #121518;
    --oh-ink-3: #25282b;
    --oh-ink-4: #303337;
    color: var(--oh-text);
    letter-spacing: 0;
  }

  /* Border-image pinta atras do conteudo, sem camada sobre cliques, tooltips ou alertas. */
  app-game-shell #top-nav .nav-labeled,
  app-game-shell .hud-bar-panel .hud-bag-button,
  app-game-shell :is(#ombria-local, #ohm-local) .hud-city-action,
  app-game-shell :is(#ombria-right, #ohm-combat) :is(select, .hud-stance, .hud-distance-step),
  app-game-shell .chat-compose button,
  app-game-shell > header :is(.mobile-chip, .mobile-fullscreen, .mobile-hunt-door),
  app-game-shell :is(#ohm-local-btn, #ohm-comb-btn, #nav-menu) {
    border-image: var(--hud-art-dark-button) 38 fill / 6px / 0 stretch;
    border-color: transparent;
    border-radius: 0;
    background: none;
    color: var(--oh-bright, #f0f0ed);
    letter-spacing: 0;
    text-shadow: 0 1px 2px #000;
  }
  app-game-shell #top-nav .nav-labeled,
  app-game-shell .hud-bar-panel .hud-bag-button,
  app-game-shell :is(#ombria-right, #ohm-combat) :is(.hud-stance, .hud-distance-step),
  app-game-shell > header :is(.mobile-fullscreen, .mobile-hunt-door),
  app-game-shell :is(#ohm-local-btn, #ohm-comb-btn, #nav-menu) {
    border-image: var(--hud-art-slot) 32 fill / 5px / 0 stretch;
  }
  app-game-shell > header :is(.header-purse #nav-store, .mobile-store-door) {
    border-image: var(--hud-art-button) 22 64 fill / 6px 12px / 0 stretch;
    border-color: transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #21190c;
    letter-spacing: 0;
    text-shadow: 0 1px 0 #fce3a680;
  }
  app-game-shell :is(#ombria-local, #ohm-local) .hud-city-action::after {
    content: none;
  }
  app-game-shell :is(#ombria-local, #ohm-local) .hud-city-action:hover:not(:disabled) {
    background: none;
    filter: brightness(1.2);
  }
  app-game-shell :is(#ombria-local, #ohm-local) .hud-city-action:disabled {
    opacity: .45;
    filter: grayscale(.7);
  }
  app-game-shell :is(#ombria-local, #ohm-local) :is(.hud-hunt-action, .ohm-session-actions button) {
    background: #202427;
    border-color: #7c725b;
    color: #e2e3df;
    letter-spacing: 0;
  }
  app-game-shell :is(#ombria-local, #ohm-local) :is(.hud-leave-hunt, .hud-leave-more) {
    background: #44272d;
    border-color: #b06b70;
    color: #ffc3c3;
  }
  app-game-shell :is(#ombria-right, #ohm-combat) .hud-stance.active {
    filter: none;
    box-shadow: inset 0 0 0 1px #f1ce80, 0 0 0 1px #080a0c;
  }
  app-game-shell :is(#ombria-right, #ohm-combat) select option {
    background: #121518;
    color: #f0f0ed;
  }
  app-game-shell #top-nav .nav-label,
  app-game-shell :is(.header-character-name, .header-character-vocation em, #header-exp-rate, .ol-title, .oc-title, .hud-preset-label, .cta-eyebrow, .cta-title, .chat-tab) {
    letter-spacing: 0;
  }
  app-game-shell :is(#top-nav, .header-purse, #ombria-ident, #ombria-local, #ombria-right, .footer-hud, #ohm-local, #ohm-combat) :is(button, select, input):focus-visible,
  app-game-shell :is(#ombria-cta, #ombria-ident):focus-visible {
    outline: 2px solid #f1ce80;
    outline-offset: 3px;
  }

  /* Mesmos slots, sprites, cooldowns e contadores; so a moldura e o fundo mudam. */
  app-game-shell .hud-slots .hud-slot {
    background: #141719 !important;
    border-color: transparent;
    border-radius: 3px;
    color: #bec3c9;
  }
  app-game-shell .hud-slots .hud-slot::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 0 solid transparent;
    border-image: var(--hud-art-slot) 32 / 5px / 0 stretch;
    background: none;
    pointer-events: none;
  }
  app-game-shell .hud-slots .hud-slot:is(.active-rule, .selected) {
    box-shadow: inset 0 0 0 2px #e5c278, 0 0 7px #dfbe7655;
  }
  app-game-shell .hud-slots .hud-slot.assigned.missing-item {
    box-shadow: inset 0 0 0 2px #ed828d;
  }
  app-game-shell .hud-slots .hud-slot:not(.assigned):hover {
    color: #f1ce80;
  }
  app-game-shell .hud-bar-panel .hud-exp .hud-level,
  app-game-shell .hud-bar-panel .hud-exp .hud-exp-percent {
    background: #101315;
    color: #f1ce80;
    box-shadow: 0 0 0 1px #050608, 0 0 0 2px #c4a568, 0 2px 5px #000b;
  }
  app-game-shell .hud-bar-panel .hud-bar.hud-hp {
    box-shadow: inset 0 0 0 1px #d2c7a8, inset 0 0 12px #000b;
  }
  app-game-shell .hud-bar-panel .hud-bar.hud-hp .fill {
    background: radial-gradient(ellipse at 46% 78%, #bc2333 0, #941525 48%, #590e1d 82%, #340b16 100%);
  }
  app-game-shell .hud-bar-panel .hud-bar.hud-mp .fill {
    background: linear-gradient(180deg, #8aebfc 0, #30c6eb 32%, #0d8fc2 70%, #066487 100%);
  }
  app-game-shell .hud-bar-panel .hud-bar.hud-hp.hit {
    box-shadow: inset 0 0 0 2px #ffc3c3, 0 0 0 3px #b46a67, 0 0 18px #f0444480;
  }
  app-game-shell .hud-bar-panel .hud-bar.hud-hp.heal {
    box-shadow: inset 0 0 0 2px #c8f7ca, 0 0 0 3px #98ad83, 0 0 18px #6be88966;
  }
app-game-shell > header,
  app-game-shell #top-nav.top-nav.open,
  app-game-shell :is(#ohm-local, #ohm-combat),
  app-game-shell :is(#ui, #game) .chat-panel:not(.folded) {
    border-color: transparent;
    border-image: var(--hud-art-frame) 72 fill / 14px / 0 stretch;
    border-radius: 0;
    background: none !important;
    box-shadow: 0 4px 10px #0006;
  }
  app-game-shell #ohm-cta {
    border-image: var(--hud-art-button) 22 64 fill / 8px 16px / 0 stretch;
    border-color: transparent;
    border-radius: 0;
    background: none;
    box-shadow: 0 3px 8px #0007;
    letter-spacing: 0;
  }
  app-game-shell #ohm-combat .oc-head {
    border-image: var(--hud-art-frame) 72 fill / 10px / 0 stretch;
    background: none;
    letter-spacing: 0;
  }

}