/* Phone combat keeps the supplied artwork and uses its own landscape geometry. */
#mobile-controls .mobile-compute, #mobile-controls .mobile-hype { display: none; }
#mobile-controls [data-mobile="options"] svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#mobile-controls .mobile-rotate[hidden] { display: none !important; }
@media (max-width: 900px), (max-height: 520px) {
  .match-active #mobile-controls.landscape-controls {
    left: var(--viewport-left); top: var(--viewport-top); width: var(--viewport-width); height: var(--viewport-height);
    display: block; padding: 0; overflow: visible; pointer-events: none;
  }
  #mobile-controls.landscape-controls .mobile-actions { display: contents; }
  #mobile-controls.landscape-controls button { position: absolute; width: auto; min-width: 44px; min-height: 44px; pointer-events: auto; margin: 0; }
  #mobile-controls.landscape-controls [data-mobile="options"] { left: 6px; top: 6px; width: 44px; height: 44px; padding: 9px; background: #332213; }
  #mobile-controls.landscape-controls [data-mobile="options"] span { display: none; }
  #mobile-controls.landscape-controls [data-mobile="options"] svg { width: 24px; height: 24px; }
  #mobile-controls.landscape-controls [data-mobile="hand"] { left: 6px; top: calc(50% - 22px); width: 56px; padding: 5px 4px; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 18px; background: #332213; }
  #mobile-controls.landscape-controls [data-mobile="hand"] img { width: 22px; height: 32px; object-fit: contain; }
  #mobile-controls.landscape-controls [data-mobile="hand"] span { min-width: 18px; }
  #mobile-controls.landscape-controls [data-mobile="fullscreen"] { display: none; }
  #mobile-controls.landscape-controls .mobile-end-turn { right: 2px; top: calc(50% - 18px); width: 106px; height: 58px; min-height: 58px; padding: 12px 4px; font-size: 12px; }
  #mobile-controls.landscape-controls [data-mobile="power"] { width: 54px; height: 54px; transform: translate(-50%,-50%); padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 0; }
  #mobile-controls.landscape-controls [data-mobile="power"]:disabled { opacity: 1; }
  #mobile-controls.landscape-controls .mobile-vitals { width: 54px; height: 54px; transform: translate(-50%,-50%); padding: 5px; border: 0; background: transparent; overflow: visible; }
  .phone-health-art { position: relative; display: block; overflow: hidden; margin: auto; }
  .phone-health-art > .hs { position: absolute; left: 0; top: 0; transform-origin: top left; }
  .phone-runway { position: absolute; right: 45px; top: 13px; width: 31px; height: 34px; display: grid; place-items: center; background: url('./hs/armor.webp') center / contain no-repeat; color: #fff; font: 22px/1 'HS BelweNumbers',Georgia,serif; text-shadow: 0 2px 3px #000; }
  #mobile-controls.landscape-controls .mobile-compute { display: flex; flex-direction: column; justify-content: center; right: 6px; width: 96px; height: 44px; padding: 1px 5px; background: rgba(31,20,10,.94); font-family: 'HS BelweNumbers',Georgia,serif; }
  #mobile-controls.landscape-controls .mobile-compute > span { display: flex; align-items: center; justify-content: center; gap: 6px; }
  #mobile-controls.landscape-controls .mobile-compute img { width: 20px; height: 23px; object-fit: contain; }
  #mobile-controls.landscape-controls .mobile-compute b { font-size: 21px; font-weight: 400; line-height: 1; }
  #mobile-controls.landscape-controls .mobile-compute small { color: #e8d3ac; font: 11px/1.2 Georgia,serif; white-space: nowrap; }
  #mobile-controls.landscape-controls [data-mobile="mana-opponent"] { top: 4px; }
  #mobile-controls.landscape-controls [data-mobile="mana-self"] { bottom: 4px; }
  #mobile-controls.landscape-controls .mobile-hype { display: none; }
  #mobile-controls.landscape-controls [data-mobile="hype-opponent"] { top: 50px; }
  #mobile-controls.landscape-controls [data-mobile="hype-self"] { bottom: 54px; }
  #mobile-controls.landscape-controls .mobile-clock { position: absolute; right: 6px; top: calc(50% - 44px); width: 96px; height: 22px; font-size: 19px; line-height: 22px; text-shadow: 0 2px 4px #160c04; }
  #mobile-controls.landscape-controls .mobile-match-status { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 260px); padding: 6px 12px; background: #332213; border-radius: 6px; font: 14px/1.4 Georgia,serif; text-align: center; }
  #stage.mobile-battle #hud { height: 100%; }
  /* WebKit drops the oversized filtered image in the clipped, scaled stage. */
  #stage.mobile-battle .hs-board { left: -400px !important; top: calc((var(--stage-source-height) - 1386px) / 2) !important; width: 2400px !important; height: 1386px !important; filter: none; }
  #stage.mobile-battle .mana, #stage.mobile-battle .deck, #stage.mobile-battle .res, #stage.mobile-battle .end-turn, #stage.mobile-battle .hero-vitals { visibility: hidden !important; pointer-events: none; }
  #stage.mobile-battle .thinking { left: 800px; top: 40px; font-size: 26px; }
  #stage.mobile-battle .turn-rope { inset: auto; left: 0; top: var(--phone-rope-top,0px); }
  #stage.mobile-battle #bigcard { display: none; }
  #stage.mobile-battle #bigcard.hand-preview.show { display: block; }
  #stage.mobile-battle #bigcard.hand-preview .hand-preview-face { pointer-events: none; }
  #stage.mobile-battle #history { display: none; }
  #stage.mobile-battle .speech { font-size: 30px; max-width: 520px; }
  #stage.mobile-battle .emote-wheel { width: 440px; }
  #mobile-controls .mobile-rotate, #mobile-controls.mobile-portrait .mobile-rotate {
    position: fixed; inset: auto; left: var(--viewport-left); top: var(--viewport-top); width: var(--viewport-width); height: var(--viewport-height);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin: 0; padding: 30px;
    background: radial-gradient(ellipse,rgba(16,10,5,.4),rgba(16,10,5,.88)), #21150d url('./hs/table.webp') center / cover;
    color: #f6e5c5; pointer-events: auto; text-align: center;
  }
  #mobile-controls .mobile-rotate > svg { width: 84px; height: 84px; fill: none; stroke: #e6c17b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  #mobile-controls .mobile-rotate h2 { margin: 6px 0 0; color: #ffe3a1; font: 30px/1.2 'HS Belwe',Georgia,serif; }
  #mobile-controls .mobile-rotate p { max-width: 28ch; margin: 0; font: 16px/1.5 Georgia,serif; }
  #mobile-controls .mobile-rotate .rotate-time { color: #e3cba4; font-size: 14px; }
  #mobile-controls .mobile-rotate [data-mobile="portrait"] { position: static; width: auto; min-height: 48px; margin-top: 12px; padding: 12px 20px; font-size: 16px; }
  #mobile-controls.mobile-portrait [data-mobile="options"] svg { display: none; }
  .phone-install-tip { max-width: 36ch; margin: 4px 0; color: #e3cba4; font: 14px/1.5 Georgia,serif; }
}