/* ============================================================================
   TEPHRA PHONE · GLASSMORPHISM UI (2026-11-07)
   Enabled for every user at <=600px. Remove the <link id="phoneGlassCss"> in
   index.html (or disable this file) to return to the solid phone UI.
   No layout or behavior changes.
   ============================================================================ */
@media (max-width: 600px) {

  body.fp-phone-scotty.fp-phone-scotty {
    --phg-surface: linear-gradient(145deg,
      color-mix(in srgb, var(--text) 16%, transparent) 0%,
      color-mix(in srgb, var(--text) 5%, transparent) 100%);
    --phg-border: color-mix(in srgb, var(--text) 22%, transparent);
    --phg-line: color-mix(in srgb, var(--text) 14%, transparent);
    --phg-blur: blur(24px) saturate(160%);
    background:
      radial-gradient(82% 46% at 2% -8%, color-mix(in srgb, var(--a1) 40%, transparent) 0%, transparent 70%),
      radial-gradient(72% 38% at 106% 13%, color-mix(in srgb, var(--a2) 22%, transparent) 0%, transparent 72%),
      radial-gradient(64% 36% at 8% 52%, color-mix(in srgb, var(--a1) 28%, transparent) 0%, transparent 72%),
      radial-gradient(58% 34% at 94% 78%, color-mix(in srgb, var(--a1) 26%, transparent) 0%, transparent 72%),
      var(--bg) !important;
    background-attachment: fixed !important;
  }

  /* ---------- app bar (no backdrop-filter: the fixed tab bar lives inside) ---------- */
  body.fp-phone-scotty.fp-phone-scotty header {
    background:
      linear-gradient(112deg, color-mix(in srgb, var(--a1) 23%, transparent) 0%, transparent 54%),
      color-mix(in srgb, var(--bg) 55%, transparent) !important;
    border-bottom-color: var(--phg-border) !important;
    box-shadow: inset 0 1px 0 var(--phg-line), 0 12px 32px rgba(0,0,0,.18);
  }
  body.fp-phone-scotty.fp-phone-scotty header .logo {
    text-shadow: 0 0 26px color-mix(in srgb, var(--a1) 42%, transparent);
  }
  body.fp-phone-scotty.fp-phone-scotty header #infoBtn,
  body.fp-phone-scotty.fp-phone-scotty header .hdr-right .shotbtn,
  body.fp-phone-scotty.fp-phone-scotty header .hdr-right #authLoggedIn,
  body.fp-phone-scotty.fp-phone-scotty header .hdr-right #authLogoutBtn {
    background: var(--phg-surface) !important;
    border-color: var(--phg-border) !important;
    box-shadow: inset 0 1px 0 var(--phg-line), 0 4px 16px rgba(0,0,0,.18) !important;
  }
  body.fp-phone-scotty.fp-phone-scotty header .hdr-right .theme-toggle {
    border-color: var(--phg-border) !important;
    box-shadow: inset 0 1px 0 var(--phg-line), 0 4px 16px rgba(0,0,0,.18) !important;
  }

  /* ---------- control deck ---------- */
  body.fp-phone-scotty.fp-phone-scotty #toolRail {
    background:
      linear-gradient(108deg, color-mix(in srgb, var(--a1) 17%, transparent) 0%, transparent 58%),
      color-mix(in srgb, var(--bg) 38%, transparent) !important;
    border-bottom-color: var(--phg-border) !important;
    -webkit-backdrop-filter: var(--phg-blur);
    backdrop-filter: var(--phg-blur);
  }
  body.fp-phone-scotty.fp-phone-scotty #toolRail#toolRail :is(#symToggle, #rngToggle, #hmVenueBtn, #hmTfBtn, #twCurStar),
  body.fp-phone-scotty.fp-phone-scotty #toolRail#toolRail .rail-group .shotbtn {
    background: var(--phg-surface) !important;
    border-color: var(--phg-border) !important;
    box-shadow: inset 0 1px 0 var(--phg-line), 0 6px 18px rgba(0,0,0,.18) !important;
  }
  body.fp-phone-scotty.fp-phone-scotty #toolRail#toolRail #fpRailRow .rail-group {
    background: var(--phg-surface) !important;
    border-color: var(--phg-border) !important;
    box-shadow: inset 0 1px 0 var(--phg-line), 0 6px 18px rgba(0,0,0,.18) !important;
  }
  body.fp-phone-scotty.fp-phone-scotty #toolRail#toolRail #fpRailRow .fp-seg.on {
    background: color-mix(in srgb, var(--text) 94%, transparent) !important;
    color: var(--bg) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 14px rgba(0,0,0,.22) !important;
  }
  body.fp-phone-scotty.fp-phone-scotty #toolRail#toolRail #phToolsBtn {
    border: 1px solid color-mix(in srgb, var(--text) 27%, transparent) !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb, var(--a1) 84%, transparent),
        color-mix(in srgb, var(--a1) 42%, transparent)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 26px color-mix(in srgb, var(--a1) 30%, transparent) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }

  /* ---------- bottom tab bar ---------- */
  body.fp-phone-scotty.fp-phone-scotty #tabGrp {
    background:
      linear-gradient(0deg, color-mix(in srgb, var(--text) 9%, transparent) 0%, transparent 50%),
      color-mix(in srgb, var(--bg) 40%, transparent) !important;
    border-top-color: var(--phg-border) !important;
    -webkit-backdrop-filter: blur(30px) saturate(175%);
    backdrop-filter: blur(30px) saturate(175%);
    box-shadow: inset 0 1px 0 var(--phg-line), 0 -14px 38px rgba(0,0,0,.26);
  }
  body.fp-phone-scotty.fp-phone-scotty #tabGrp button.on {
    background:
      linear-gradient(145deg,
        color-mix(in srgb, var(--text) 20%, transparent),
        color-mix(in srgb, var(--text) 9%, transparent)) !important;
    border: 1px solid var(--phg-border) !important;
    box-shadow: inset 0 1px 0 var(--phg-line), 0 5px 16px rgba(0,0,0,.18) !important;
  }

  /* ---------- below-chart cards ---------- */
  body.fp-phone-scotty.fp-phone-scotty #phTrapped,
  body.fp-phone-scotty.fp-phone-scotty #nlsBox,
  body.fp-phone-scotty.fp-phone-scotty #mtfBox {
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--text) 17%, transparent) 0%,
        color-mix(in srgb, var(--text) 5%, transparent) 48%,
        color-mix(in srgb, var(--text) 8%, transparent) 100%),
      color-mix(in srgb, var(--panel) 26%, transparent) !important;
    border-color: var(--phg-border) !important;
    box-shadow: inset 0 1px 0 var(--phg-line), inset 0 -1px 0 rgba(0,0,0,.22), 0 20px 46px rgba(0,0,0,.32) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
  }
  body.fp-phone-scotty.fp-phone-scotty #nlsBox .nls-panel {
    background: color-mix(in srgb, var(--bg) 30%, transparent) !important;
    border-color: var(--phg-border) !important;
    box-shadow: inset 0 1px 0 var(--phg-line);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  body.fp-phone-scotty.fp-phone-scotty #nlsBox .nls-tabs .fx-tf {
    background: var(--phg-surface) !important;
    border-color: var(--phg-border) !important;
    box-shadow: inset 0 1px 0 var(--phg-line);
  }
  body.fp-phone-scotty.fp-phone-scotty #nlsBox .nls-tabs .fx-tf.on {
    background: color-mix(in srgb, var(--text) 94%, transparent) !important;
    color: var(--bg) !important;
    border-color: color-mix(in srgb, var(--text) 44%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  }

  /* ---------- floating chrome ---------- */
  body.fp-phone-scotty.fp-phone-scotty #wrap::after {
    background:
      linear-gradient(145deg,
        color-mix(in srgb, var(--text) 16%, transparent),
        color-mix(in srgb, var(--text) 4%, transparent)),
      color-mix(in srgb, var(--panel) 14%, transparent) !important;
    border-color: var(--phg-border) !important;
    color: var(--text) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: inset 0 1px 0 var(--phg-line), 0 8px 24px rgba(0,0,0,.22) !important;
  }
  body.fp-phone-scotty.fp-phone-scotty #chatBubble,
  body.fp-phone-scotty.fp-phone-scotty #guideFab {
    background:
      linear-gradient(145deg,
        color-mix(in srgb, var(--text) 16%, transparent),
        color-mix(in srgb, var(--text) 4%, transparent)),
      color-mix(in srgb, var(--panel) 22%, transparent) !important;
    border-color: var(--phg-border) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: inset 0 1px 0 var(--phg-line), 0 10px 30px rgba(0,0,0,.26) !important;
  }

  /* ---------- tools sheet ---------- */
  body.fp-phone-scotty.fp-phone-scotty #phSheet {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--panel) 64%, transparent),
        color-mix(in srgb, var(--panel) 84%, transparent)) !important;
    border-top-color: var(--phg-border) !important;
    -webkit-backdrop-filter: blur(32px) saturate(165%);
    backdrop-filter: blur(32px) saturate(165%);
    box-shadow: inset 0 1px 0 var(--phg-line), 0 -20px 60px rgba(0,0,0,.40) !important;
  }
  body.fp-phone-scotty.fp-phone-scotty #phScrim {
    background: rgba(0,0,0,.18) !important;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
  }
  body.fp-phone-scotty.fp-phone-scotty #phSheet .rail-row {
    background:
      linear-gradient(145deg,
        color-mix(in srgb, var(--text) 11%, transparent),
        color-mix(in srgb, var(--text) 3%, transparent)),
      color-mix(in srgb, var(--panel) 28%, transparent) !important;
    border-color: var(--phg-border) !important;
    box-shadow: inset 0 1px 0 var(--phg-line);
  }
  body.fp-phone-scotty.fp-phone-scotty #phSheet .rail-ovl:has(button.on) {
    border-color: color-mix(in srgb, var(--a1) 72%, transparent) !important;
  }
}