/* Desktop + landscape tablet layout (owner feedback 2026-10-03: "on desktop the UI is a centred phone column, everything tiny").
   Phones are untouched: every rule sits inside the DESK media query below (same query as DESK_MQ in src/desktop.js; keep them in sync).
   All selectors start with #app so they beat the module stylesheets that load later (home-showcase.css, meta-v3.css, shop.css,
   econ.css, target.css) without !important. Mostly CSS; JS only frames the Home showcase camera for the stage column
   (src/home-showcase.js measure) and closes sheets with Esc (src/desktop.js). */

#h-gems-pill { display: none; }

@media (min-width: 768px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  :root { --dk-side: clamp(380px, 33vw, 460px); --dk-gut: max(28px, calc((100vw - 1280px) / 2)); --dk-z: 1.1; }

  /* ================================================================ Home: top bar + 3D stage (left) + action panel (right) */
  #app #home { display: grid; align-items: stretch; justify-items: stretch;
    grid-template-columns: minmax(0, 1fr) var(--dk-side);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    column-gap: 32px; row-gap: 14px;
    padding: calc(18px + env(safe-area-inset-top)) var(--dk-gut) calc(34px + env(safe-area-inset-bottom));
    background:
      linear-gradient(rgba(20, 14, 38, .82) 0, rgba(20, 14, 38, .4) 84px, rgba(20, 14, 38, 0) 150px),
      linear-gradient(to top, rgba(20, 14, 38, .55) 0, rgba(20, 14, 38, 0) 160px); }
  #app #home > * { width: auto; max-width: none; min-width: 0; grid-column: 2; }
  /* the right panel: one card behind the strip + action buttons (a grid pseudo-element, so no wrapper markup) */
  #app #home::before { content: ""; grid-column: 2; grid-row: 3 / -1; margin: -16px; border-radius: 30px;
    background: linear-gradient(rgba(42, 31, 82, .9), rgba(27, 20, 48, .94)); box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1.5px rgba(255,255,255,.06); }
  #app #home .home-top { position: relative; top: auto; left: auto; transform: none; width: auto; max-width: none; grid-column: 1 / -1; grid-row: 1;
    gap: 12px; z-index: 3; }
  #app #home .hs-stage, #app #home .home-spacer { grid-column: 1; grid-row: 2 / -1; min-height: 0; }
  #app #home > .offline-badge { grid-column: 1; grid-row: 2; justify-self: center; align-self: start; z-index: 2; font-size: 14px; padding: 7px 16px; }
  #app #home .hs-row { grid-row: 3; gap: 12px; }
  #app #home .meta-row { grid-row: 4; gap: 12px; }
  #app #home .home-actions { grid-row: 5; gap: 12px; }
  #app #home .meta-play { grid-row: 6; }
  #app #home > .shop-fab:not(.hs-shop) { position: relative; top: auto; right: auto; grid-row: 2; align-self: end; justify-self: end; }
  #app #home .pets-card { grid-column: 1; grid-row: 2 / -1; align-self: end; }
  /* comms dock (What's new, next reward, invite; src/comms.css): top left of the 3D stage, never over the right panel
     (2026-10-09: on 1280 px tablets / windows it sat on the panel). It is a grid child: its area is the stage cell; the inline
     top from src/comms.js place() (below the phone strip) does not apply here. */
  #app #home > .cx-dock { grid-column: 1; grid-row: 2; left: 4px; top: 10px !important; }

  /* top bar: who (left) ... trophies, coins, gems, install, settings (right) */
  #app #home .who { flex: 0 1 380px; margin-right: auto; gap: 12px; padding: 6px 18px 6px 6px; }
  #app #home .who .meta-ring { --s: 54px !important; }
  #app #home .who .meta-lv { min-width: 23px; height: 23px; font-size: 13px; }
  #app #home .avatar { width: 48px; height: 48px; font-size: 22px; }
  #app #home .who-t b { font-size: 19px; }
  #app #home .who-t small { font-size: 13.5px; }
  #app #home .meta-xpline { max-width: 200px; height: 6px; margin-top: 4px; }
  #app #home #h-name .who-t > .ph-badges .ph-badge { font-size: 10px; padding: 1px 6px; }
  #app #home.hs-on .home-top .pill, #app #home .home-top .pill { padding: 10px 18px 10px 12px; font-size: 19px; gap: 8px; }
  #app #home .home-top .pill .ico { width: 24px; height: 24px; }
  #app #h-gems-pill { display: flex; }
  #app #home .hs-gear, #app #home .pwa-entry { width: 50px; height: 50px; }
  #app #home .hs-gear svg { width: 21px; height: 21px; }
  #app #home .hs-gear b { font-size: 10.5px; }
  #app #home .pwa-entry svg { width: 24px; height: 24px; }

  /* income strip + Shop (top of the panel) */
  #app #home .hs-strip { padding: 10px 12px 10px 16px; border-radius: 18px; column-gap: 12px; }
  #app #home .hs-strip-main { gap: 7px; }
  #app #home .hs-strip-main .ico { width: 22px; height: 22px; }
  #app #home .hs-strip-main b { font-size: 21px; }
  #app #home .hs-strip > small { font-size: 13px; }
  #app #home .hs-q { width: 19px; height: 19px; font-size: 12.5px; }
  #app #home .hs-peds { padding: 7px 12px 7px 9px; gap: 6px; border-radius: 13px; }
  #app #home .hs-ped-ico svg { width: 22px; height: 22px; }
  #app #home .hs-peds b { font-size: 18px; }
  #app #home .hs-row .shop-fab.hs-shop { padding: 8px 18px 6px; border-radius: 18px; gap: 2px; }
  #app #home .hs-row .shop-fab.hs-shop .shop-fab-ico svg, #app #home .hs-row .shop-fab .ec-coinfab .ico.coin { width: 28px; height: 28px; }
  #app #home .hs-row .shop-fab.hs-shop b { font-size: 14px; }

  /* skills / loadout */
  #app #home .meta-pill-btn { padding: 13px 16px; gap: 12px; border-radius: 18px; }
  #app #home .meta-pill-btn > .ico { width: 32px; height: 32px; }
  #app #home .meta-pill-btn b { font-size: 18px; }
  #app #home .meta-pill-btn small { display: block; font-size: 13px; }
  /* vault / defenses / leaders */
  #app #home .tile-btn { padding: 14px 6px 13px; gap: 5px; border-radius: 18px; }
  #app #home .tile-btn .ico { width: 34px; height: 34px; }
  #app #home .tile-btn b { font-size: 17px; }
  #app #home .tile-btn em { font-size: 12px; padding: 2px 9px; }
  #app #home .badge { min-width: 28px; height: 28px; line-height: 28px; font-size: 15px; border-radius: 14px; }
  /* campaign (full width) + RAID (the big primary at the bottom) */
  #app #home .meta-play { grid-template-columns: 1fr; gap: 16px; padding-top: 4px; }
  #app #home .big-btn.meta-camp { justify-content: flex-start; gap: 14px; padding: 15px 20px; font-size: 23px; border-radius: 20px; }
  #app #home .big-btn.meta-camp .ico { width: 34px; height: 34px; }
  #app #home .meta-camp-t small { font-size: 13.5px; }
  #app #home .big-btn.raid { padding: 18px 20px 15px; font-size: 54px; letter-spacing: 8px; border-radius: 24px; }
  #app #home .big-btn.raid small { font-size: 15px; letter-spacing: 1.5px; margin-top: 6px; }
  #app.lang-ru #home .big-btn.raid, .lang-ru #app #home .big-btn.raid { letter-spacing: 5px; }
  #app #home .big-btn.raid .raid-t { max-width: 100%; }
  .lang-de #app #home .big-btn.raid .raid-t { letter-spacing: 4px; }

  /* 3D stage: bigger name tags + quests / bag chips */
  #app #home .hs-tag { max-width: 240px; padding: 6px 15px 7px; border-radius: 15px; gap: 2px; }
  #app #home .hs-tag-n { font-size: 17px; gap: 6px; }
  #app #home .hs-tag-s { font-size: 13px; gap: 7px; }
  #app #home .hs-rar { font-size: 11.5px; }
  #app #home .hs-inc .ico { width: 14px; height: 14px; }
  #app #home .hs-hot { font-size: 12px; padding: 3px 8px; }
  #app #home .hs-tag.slot .hs-tag-n { font-size: 15px; }
  #app #home .hs-plus { width: 20px; height: 20px; font-size: 17px; }
  #app #home .hs-tag.cta { max-width: 440px; padding: 13px 20px 13px 14px; border-radius: 20px; gap: 14px; }
  #app #home .hs-tag.cta > .ico { width: 40px; height: 40px; }
  #app #home .hs-tag.cta b { font-size: 20px; }
  #app #home .hs-tag.cta small { font-size: 14px; }
  #app #home .ec-home { zoom: 1.3; left: 4px; bottom: 6px; }
  #app #home .hs-coach-bub { max-width: 380px; padding: 12px 18px 12px 13px; border-radius: 18px; gap: 10px; }
  #app #home .hs-coach-bub b { font-size: 18px; }
  #app #home .hs-coach-bub .ico { width: 30px; height: 30px; }

  /* ================================================================ sheets: centred dialogs, wider, content scaled */
  #app .sheet { align-items: center; padding: 24px; background: rgba(12, 8, 26, .66); }
  #app .sheet-card { zoom: var(--dk-z); max-width: calc(600px / var(--dk-z)); max-height: 88%; border-radius: 28px; padding: 18px 22px 22px; --sh-px: 22px;
    box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); animation-name: dkSheetIn; }
  @keyframes dkSheetIn { from { transform: translateY(18px) scale(.97); opacity: 0; } }
  #app .sheet.narrow .sheet-card { max-width: calc(540px / var(--dk-z)); }
  #app .sheet.tg-sheet .sheet-card { max-width: calc(580px / var(--dk-z)); }
  #app .sheet.shop-sheet .sheet-card { max-width: calc(760px / var(--dk-z)); max-height: 92%; }
  #app .sheet.meta-full .sheet-card { max-width: calc(760px / var(--dk-z)); height: auto; max-height: 92%; }
  #app .sheet.shop-co-sheet .sheet-card { zoom: 1; max-width: 600px; }
  #app .sheet-card h2 { font-size: 24px; }
  #app .sheet-card header { margin-bottom: 14px; }
  /* shop: two looks per row stay, the bundle cards get room */
  #app .shop-sheet .shop-tabs button { padding: 10px 8px; font-size: 15px; }
  /* campaign map: the five vaults of a chapter spread over the wider card */
  #app .meta-path { justify-content: safe center; padding-left: 18px; padding-right: 18px; }
  #app .meta-node { width: 92px; }
  #app .meta-node small { max-width: 90px; font-size: 11.5px; }
  #app .meta-link { width: 20px; }
  /* skills / loadout / leaderboard / defenses: a little more air */
  #app .meta-sk-list { gap: 9px; }
  #app .lb li { padding: 11px 14px; }
  #app .defs li { padding: 12px; }

  /* ================================================================ title */
  #app #title { background: radial-gradient(ellipse at 50% 38%, rgba(27,20,48,0) 0, rgba(27,20,48,.3) 50%, rgba(27,20,48,.88) 100%),
    linear-gradient(to top, rgba(20,14,38,.7) 0, rgba(20,14,38,0) 34%); }
  #app .title-wrap { padding-top: calc(9vh + env(safe-area-inset-top)); padding-bottom: calc(5.5vh + env(safe-area-inset-bottom)); gap: 22px; }
  #app .logo-top { font-size: clamp(72px, 9.5vh, 112px); -webkit-text-stroke-width: 4px; }
  #app .logo-bot { font-size: clamp(104px, 14vh, 168px); -webkit-text-stroke-width: 4px; }
  #app .logo-sub { font-size: clamp(18px, 2.4vh, 24px); margin-top: 20px; letter-spacing: 1px; }
  #app .npc-tag { font-size: 15px; padding: 7px 16px; }
  #app #btn-play { min-width: 340px; padding: 24px 64px; font-size: 44px; letter-spacing: 6px; border-radius: 28px;
    box-shadow: 0 9px 0 #b86a0a, 0 18px 34px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.7); }
  #app .title-foot { font-size: 15px; max-width: 560px; opacity: .85; }
  #app .title-lang { top: calc(18px + env(safe-area-inset-top)); right: 20px; }
  #app .title-lang .lang-cur { font-size: 13px; padding: 9px 12px; }

  /* ================================================================ raid HUD: everything a size up, mouse/keyboard hints */
  #app #hud > :not(#head-eye) { zoom: 1.2; }
  #app #lockpick .lp-card, #app #paused .res-card { zoom: 1.2; }
  /* the touch stick stays invisible until a mouse drag uses it (the drag zone still works) */
  .desk #app #stick.idle { opacity: 0; }
  .desk #app #btn-sneak { width: 112px; height: 112px; right: calc(26px + env(safe-area-inset-right)); bottom: calc(30px + env(safe-area-inset-bottom)); }
  .desk #app #btn-sneak .ico { width: 38px; height: 38px; }
  .desk #app #btn-sneak small { font-size: 13px; }
  .desk #app .raid-gbtn { width: 90px; height: 90px; bottom: calc(41px + env(safe-area-inset-bottom)); }
  .desk #app .raid-gbtn .ico { width: 32px; height: 32px; }
  .desk #app .raid-gbtn small { font-size: 12px; }
  .desk #app .raid-gbtn em { width: 30px; height: 30px; line-height: 30px; font-size: 16px; }
  .desk #app .raid-gbtn[data-slot="0"] { right: calc(158px + env(safe-area-inset-right)); }
  .desk #app .raid-gbtn[data-slot="1"] { right: calc(266px + env(safe-area-inset-right)); }
  .desk #app .raid-gbtn[data-slot="2"] { right: calc(374px + env(safe-area-inset-right)); }
  /* key hints: E / Q / R gadgets (also 1 / 2 / 3), Space sneak, Esc pause (src/input.js) */
  .desk #app #btn-sneak::before, .desk #app .raid-gbtn::before { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
    min-width: 24px; padding: 3px 7px 2px; border-radius: 7px; font: 900 12px/1 var(--font); letter-spacing: .5px; color: var(--ink);
    background: var(--cream); box-shadow: 0 2px 0 rgba(0,0,0,.4); white-space: nowrap; pointer-events: none; }
  .desk #app #btn-sneak::before { content: "Space"; }
  .desk #app .raid-gbtn[data-slot="0"]::before { content: "E"; }
  .desk #app .raid-gbtn[data-slot="1"]::before { content: "Q"; }
  .desk #app .raid-gbtn[data-slot="2"]::before { content: "R"; }
  .desk #app #btn-pause { position: relative; }
  .desk #app #btn-pause::before { content: "Esc"; position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); padding: 3px 6px 2px; border-radius: 6px;
    font: 900 10px/1 var(--font); color: rgba(255,246,230,.85); background: rgba(0,0,0,.35); pointer-events: none; }

  /* results: same compact card, a size up */
  #app #results .res-card { zoom: 1.18; }

  /* ================================================================ builder: palette as a left tool panel, wider top bar */
  #app .b-top { padding: calc(14px + env(safe-area-inset-top)) var(--dk-gut) 12px; gap: 8px; }
  #app .b-top .round-btn { width: 50px; height: 50px; }
  #app .b-top .round-btn .ico { width: 26px; height: 26px; }
  #app .b-title b { font-size: 26px; }
  #app .b-title .chip { font-size: 13px; padding: 5px 12px; }
  #app .b-sub { font-size: 14px; }
  #app .budget { padding: 8px 14px; gap: 12px; border-radius: 14px; }
  #app .budget .ico { width: 22px; height: 22px; }
  #app .bbar { height: 14px; border-radius: 8px; }
  #app .budget b { font-size: 16px; min-width: 84px; }
  #app .b-bottom { padding: 10px 0 calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(27,20,48,0), rgba(27,20,48,.88) 40%, rgba(27,20,48,.96)); }
  #app .b-tip { font-size: 15px; padding-bottom: 10px; }
  /* anchored above the bottom bar (absolute, not fixed: screen-enter animations transform the bars) */
  #app #b-palette { position: absolute; left: calc(var(--dk-gut) - 8px); bottom: calc(100% + 14px); z-index: 2; overflow: visible;
    display: grid; grid-template-columns: repeat(3, 82px); gap: 8px; padding: 12px; border-radius: 24px;
    background: rgba(27, 20, 48, .9); box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1.5px rgba(255,255,255,.06);
    -webkit-mask-image: none; mask-image: none; touch-action: auto; }
  #app .tool { width: 82px; padding: 7px 3px 7px; border-radius: 16px; gap: 2px; transition: background .12s, border-color .12s, transform .12s; }
  #app .tool-img, #app .tool-img img { width: 52px; height: 52px; }
  #app .tool-img .ico { width: 34px; height: 34px; }
  #app .tool b { font-size: 12.5px; }
  #app .tool[data-tool="reinforced"] b { font-size: 12px; }
  #app .tool small { font-size: 11.5px; min-height: 15px; }
  @media (max-height: 819px) { /* shorter windows: 4 x 3 tools so the panel stays under the top bar */
    #app #b-palette { grid-template-columns: repeat(4, 76px); }
    #app .tool { width: 76px; }
    #app .tool-img, #app .tool-img img { width: 46px; height: 46px; }
  }
  #app .b-actions { max-width: 600px; gap: 14px; }
  #app .b-actions .big-btn.sm { font-size: 22px; padding: 15px 20px; }
  #app #b-dog-bar { bottom: calc(150px + env(safe-area-inset-bottom)); font-size: 15px; padding: 10px 10px 10px 18px; }

  /* replay bar */
  #app .rp-top { left: var(--dk-gut); right: var(--dk-gut); max-width: 900px; margin: 0 auto; padding: 8px 8px 8px 12px; }
  #app .rp-top b { font-size: 18px; } #app .rp-top small { font-size: 14px; }
  #app .rp-bar { max-width: 760px; padding: 10px 12px; gap: 12px; }
  #app .play-btn { width: 56px; height: 56px; }
  #app .rp-mid span { font-size: 14px; }

  /* toasts */
  #app #meta-toast { font-size: 16px; padding: 12px 20px; top: calc(96px + env(safe-area-inset-top)); }

  /* ================================================================ mouse: hover + keyboard focus */
  #app :focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
  #app #sheet-body :focus-visible { outline-offset: 2px; }
}

@media (min-width: 768px) and (min-height: 600px) and (min-aspect-ratio: 5/4) and (hover: hover) and (pointer: fine) {
  #app .tile-btn, #app .meta-pill-btn, #app .hs-strip, #app .hs-gear, #app .pwa-entry, #app .who, #app .shop-fab, #app .big-btn, #app .mini, #app .round-btn,
  #app .tool, #app .ec-hchip, #app .hs-tag, #app .meta-node, #app .meta-gadget, #app .meta-thief, #app .pick, #app .lb li, #app .seg button { transition: filter .12s, transform .12s, background-color .12s, border-color .12s; }
  #app .tile-btn:hover, #app .meta-pill-btn:hover, #app .hs-strip:hover, #app .tool:hover, #app .meta-gadget:not(.locked):hover, #app .meta-thief:not(.locked):hover, #app .pick:hover { transform: translateY(-2px); filter: brightness(1.12); }
  #app .big-btn:not(:disabled):hover, #app .shop-fab:hover, #app .mini:not(:disabled):hover, #app .meta-plus:not(:disabled):hover, #app .ec-hchip:hover, #app .hs-tag:hover { filter: brightness(1.1) saturate(1.05); }
  #app .round-btn:hover, #app .hs-gear:hover, #app .pwa-entry:hover, #app .who:hover { filter: brightness(1.3); }
  #app .meta-node:not(.locked):hover .meta-node-c { transform: translateY(-2px) scale(1.05); filter: brightness(1.08); }
  #app .tool:not(.sel):hover { border-color: rgba(255, 201, 60, .45); background: rgba(255,255,255,.12); }
  #app .tile-btn:active, #app .meta-pill-btn:active, #app .tool:active { transform: translateY(3px); filter: none; }
  #app .hs-stage { cursor: pointer; }
}

@media (min-width: 1400px) and (min-height: 860px) and (min-aspect-ratio: 5/4) {
  :root { --dk-z: 1.2; }
  #app #home { row-gap: 16px; }
  #app #home .big-btn.raid { font-size: 60px; padding: 22px 20px 17px; }
  #app #hud > :not(#head-eye) { zoom: 1.32; }
  #app #results .res-card { zoom: 1.32; }
  #app #lockpick .lp-card, #app #paused .res-card { zoom: 1.35; }
  .desk #app #btn-sneak { width: 124px; height: 124px; }
  .desk #app .raid-gbtn { width: 100px; height: 100px; }
  .desk #app .raid-gbtn[data-slot="0"] { right: calc(172px + env(safe-area-inset-right)); }
  .desk #app .raid-gbtn[data-slot="1"] { right: calc(290px + env(safe-area-inset-right)); }
  .desk #app .raid-gbtn[data-slot="2"] { right: calc(408px + env(safe-area-inset-right)); }
  #app #b-palette { grid-template-columns: repeat(3, 92px); }
  #app .tool { width: 92px; }
  #app .tool-img, #app .tool-img img { width: 60px; height: 60px; }
}
@media (min-width: 1800px) and (min-height: 1000px) and (min-aspect-ratio: 5/4) {
  :root { --dk-z: 1.3; --dk-side: 480px; --dk-gut: max(28px, calc((100vw - 1560px) / 2)); }
  /* big screens: the whole Home chrome a size up (zoom keeps the proportions; the 3D stage is framed in JS) */
  #app #home .home-top, #app #home .hs-row, #app #home .meta-row, #app #home .home-actions, #app #home .meta-play { zoom: 1.14; }
  #app #home { row-gap: 18px; padding-bottom: calc(46px + env(safe-area-inset-bottom)); }
  #app #home::before { margin: -20px; }
  #app #hud > :not(#head-eye) { zoom: 1.45; }
  #app #results .res-card { zoom: 1.45; }
}
@media (min-width: 768px) and (min-height: 600px) and (min-aspect-ratio: 5/4) and (prefers-reduced-motion: reduce) {
  #app .sheet-card { animation: none; }
  #app * { transition: none !important; }
}
@media (min-width: 768px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  /* builder: toasts / hints sit under the taller top bar instead of over the budget bar */
  #app #builder:not(.hidden) ~ #meta-toast { top: calc(var(--b-hdr, 150px) + 8px); }
}