#focus-btn {
    position: fixed;
    right: calc(var(--panel-r) + 14px);
    bottom: 14px;
    z-index: 3;
    min-width: 132px;
    text-align: center;
    background: var(--bark);
    box-shadow: 0 4px 14px rgba(0,0,0,.45);
  }
  #focus-btn[aria-pressed="true"] { border-color: var(--ember); color: var(--ember); }
  #focus-btn:disabled { opacity: .5; cursor: not-allowed; }
  html.phone #focus-btn { right: 8px; bottom: 62px; min-width: 0; padding: 9px 14px; }

  .navbar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
    gap: 8px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0,0,0,.5), transparent);
  }
  .navbar .bar { flex: 1 1 0; text-align: center; background: var(--bark); }

  html.phone { --panel-l: 0px; --panel-r: 0px; }
  html.phone .navbar { display: flex; }
  html.phone .panel {
    width: min(90vw, 400px);
    z-index: 6;
    transition: transform .18s ease;
    padding-bottom: 62px;
  }
  html.phone .panel--left  { transform: translateX(-104%); }
  html.phone .panel--right { transform: translateX(104%); }
  html.phone .panel.open   { transform: none; }
  html.phone .topbar {
    left: 0; right: 0;
    padding: calc(8px + env(safe-area-inset-top)) 8px 8px;
    gap: 8px;
  }
  html.phone .topbar .bar { min-width: 0; flex: 0 1 auto; padding: 9px 12px; }
  html.phone .hudbtn { left: -4px; top: calc(46px + env(safe-area-inset-top)); }
  html.phone .hud {
    left: 8px;
    top: calc(58px + env(safe-area-inset-top));
    width: 148px;
    padding: 7px 8px;
  }
  html.phone .hud__row { font-size: 8px; }
  html.phone .hud__row b { font-size: 9px; }
  html.phone .dev { bottom: auto; top: calc(58px + env(safe-area-inset-top)); right: 8px; left: auto; align-items: flex-end; }

  /* ── Rarity frames ──────────────────────────────────────────────────────

     Refined: solid wood, a touch thicker. Enchanted: iridescent sheen.
     Awakened: gem at each corner. Ascended: fortified corner brackets. */