/* phone-chrome.css — one top bar on every phone page, and black text in every field. 20261015pc1 */
@media (max-width: 720px) {
  /* ── top bar: logo · (inbox) (bell) avatar · language ───────────── */
  .treblo-topbar { height: 56px !important; padding: 0 12px !important; gap: 8px !important; display: flex !important; align-items: center !important; }
  .treblo-topbar-left { gap: 8px !important; min-width: 0 !important; flex: 1 1 auto !important; }
  .treblo-topbar-brand { flex: none !important; }
  .treblo-topbar-logo-img { height: 26px !important; width: auto !important; max-width: none !important; display: block !important; }
  .treblo-topbar-logo-text { display: none !important; }
  .treblo-topbar-right, #trbTopbarRight { gap: 8px !important; flex: none !important; display: flex !important; align-items: center !important; }
  /* order on the right: bell, inbox, then profile beside the language pill */
  .treblo-bell-wrap { order: 1; } .thib-wrap { order: 2; } .treblo-topbar-profile-wrap, #trbProfileWrap { order: 3; } .treblo-lang-switcher { order: 4; }
  .treblo-topbar-right > * { margin: 0 !important; }
  /* things that do not belong on a phone top bar (the bottom nav and avatar menu carry them) */
  .treblo-topbar .throw-pwa-chip, #throwInstallBtn, #throwNotifyBtn,
  .treblo-topbar-back, .treblo-tier-badge, .treblo-player-code, .treblo-topbar-signout,
  .treblo-topbar-profile-name, .treblo-topbar-profile-caret, .treblo-help-launcher { display: none !important; }
  /* inbox and notification bell: white icon in a 36px round, badge top right */
  .thib-tile, .treblo-bell-btn {
    width: 36px !important; height: 36px !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    color: #fff !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.14) !important; font-size: 0 !important;
  }
  .thib-tile .thib-lbl { display: none !important; }
  .thib-tile > span[aria-hidden] { display: inline-flex !important; vertical-align: 0 !important; }
  .thib-tile svg, .treblo-bell-btn svg { width: 18px !important; height: 18px !important; }
  .treblo-bell-btn { font-size: 18px !important; }
  .thib-badge, .treblo-bell-badge { top: -4px !important; right: -4px !important; min-width: 17px !important; height: 17px !important; line-height: 17px !important; font-size: 10px !important; padding: 0 4px !important; border: 2px solid #121517; box-sizing: content-box; }
  /* avatar and language */
  .treblo-topbar-profile-wrap, #trbProfileWrap { height: 36px !important; width: 36px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .treblo-topbar-avatar { width: 32px !important; height: 32px !important; font-size: 13px !important; }
  .treblo-lang-switcher { height: 36px !important; min-height: 0 !important; padding: 0 !important; border-radius: 10px !important; display: flex !important; align-items: center !important; }
  .treblo-lang-switcher .treblo-lang-btn { height: 36px !important; min-height: 0 !important; padding: 0 10px !important; border-radius: 10px !important; }
  .treblo-lang-switcher .treblo-lang-code { font-size: 12px !important; }
  /* the league sidebar toggle on game.html keeps its place at the left */
  #trbSidebarToggle { width: 36px !important; height: 36px !important; }

  /* ── bell and inbox panels drop down as a full-width card ────────── */
  .treblo-bell-wrap, .thib-wrap { position: static !important; }
  .treblo-bell-panel, .thib-panel {
    position: fixed !important; left: 10px !important; right: 10px !important; top: 62px !important; bottom: auto !important;
    width: auto !important; max-width: none !important; max-height: calc(100vh - 140px) !important; overflow-y: auto !important;
    border-radius: 16px !important; box-shadow: 0 18px 50px rgba(18,21,23,.35) !important; z-index: 9999 !important; font-size: 14px;
  }
  .treblo-bell-panel-head, .thib-head { padding: 12px 14px !important; }
  .treblo-bell-title, .thib-head h4 { font-size: 15px !important; font-weight: 800 !important; }
  .treblo-bell-panel button, .thib-head .thib-btn { min-height: 34px !important; font-size: 12px !important; border-radius: 9px !important; }
  .treblo-bell-item, .thib-item { padding: 12px 14px !important; }
  .treblo-bell-item-title, .thib-it, .thib-tt { font-size: 14px !important; }
  .treblo-bell-item-body, .treblo-bell-item-meta, .thib-ib, .thib-im { font-size: 12.5px !important; }

  /* ── fields: what you type is black ─────────────────────────────── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), textarea, select {
    color: #121517 !important; -webkit-text-fill-color: #121517 !important; font-weight: 600;
  }
  input::placeholder, textarea::placeholder { color: #8a8f94 !important; -webkit-text-fill-color: #8a8f94 !important; font-weight: 400; opacity: 1; }
  select option { color: #121517; }
  /* dark surfaces: fields that sit on ink or red stay white-on-dark */
  .ol-def input, .ol-out input, .lp-hero input, .v2-ph input { color: #fff !important; -webkit-text-fill-color: #fff !important; }
}