/* v0.24 native feel: remove the tell-tale "this is a web page" behaviours so ScrimMate behaves like a native
   Android app. Text in fields, chats and codes stays selectable; everything else behaves like native views. */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; }
input, textarea, select, [contenteditable="true"], [contenteditable=""], .sm-selectable, .sm-selectable *,
.sm-bubble__text, .sm-adm-json, .sm-ocrlab__pre, pre, code, kbd, samp {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
img, svg, video, canvas, a { -webkit-user-drag: none; user-drag: none; }
img { -webkit-touch-callout: none; }
/* Native views never show a focus ring after a finger tap; keyboard/D-pad focus still gets one. */
:focus:not(:focus-visible) { outline: none; }
/* Scrollbars fade out on native lists; WebView draws persistent ones. Hide them, scrolling is unchanged. */
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
* { scrollbar-width: none; }
/* Native press feedback for tappable rows/cards that have no ripple of their own. */
.sm-team-card, .scrim-card, .sm-match-card, .sm-friend-card, .sm-result-row, .sm-org-squad-card, .sm-notif-card, .sm-notif-row,
.sm-search-card, .sm-host-card, .sm-rk-row, .rk-row, .sm-req-card, .sm-roster-row, .hm-tile, .sm-quick-action, .sm-app-shell__tab, .sm-chip, .chip {
  transition: transform .12s cubic-bezier(.2,0,0,1), background-color .15s ease, opacity .15s ease;
}
.sm-team-card:active, .scrim-card:active, .sm-match-card:active, .sm-friend-card:active, .sm-result-row:active,
.sm-org-squad-card:active, .sm-notif-card:active, .sm-notif-row:active, .sm-search-card:active, .sm-host-card:active,
.sm-rk-row:active, .rk-row:active, .sm-req-card:active, .hm-tile:active, .sm-quick-action:active {
  transform: scale(.985);
}
.sm-app-shell__tab:active { transform: scale(.94); }
html.sm-reduce-motion *:active { transform: none !important; }

/* Pull to refresh (Material swipe-refresh indicator). */
.sm-ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 1200; width: 40px; height: 40px;
  margin-left: -20px; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: var(--surface-container-high, #1d1d22); color: var(--primary, #ffc83d);
  box-shadow: 0 4px 14px rgb(0 0 0 / .35); transform: translateY(-64px) scale(.6); opacity: 0;
  transition: transform .2s cubic-bezier(.2,0,0,1), opacity .2s ease; }
.sm-ptr svg { width: 22px; height: 22px; }
.sm-ptr.is-pulling { transition: none; }
.sm-ptr.is-ready svg { color: var(--primary, #ffc83d); }
.sm-ptr.is-refreshing svg { animation: sm-ptr-spin .8s linear infinite; }
@keyframes sm-ptr-spin { to { transform: rotate(360deg); } }

/* Offline strip, like the system "No connection" banners in native apps. */
.sm-offline { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); z-index: 1300;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: #2a1f12; color: #ffd98a; font-weight: 600; font-size: 13px; box-shadow: 0 6px 20px rgb(0 0 0 / .4);
  transform: translateY(140%); opacity: 0; transition: transform .25s cubic-bezier(.2,0,0,1), opacity .25s ease; }
.sm-offline.is-on { transform: none; opacity: 1; }
.sm-offline.is-back { background: #13261a; color: #9be7b0; }
.sm-offline svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Branding: creator credit (About / Settings / login). */
.sm-credit { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px auto 6px; font-size: 12px;
  color: var(--on-surface-variant, #9a9aa3); letter-spacing: .02em; }
.sm-credit b { color: var(--primary, #ffc83d); font-weight: 700; letter-spacing: .04em; }
.sm-credit__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }

/* v0.24 branding: creator credit */
.sm-credit { margin-top: 6px; font-size: .72rem; letter-spacing: .02em; color: var(--on-surface-variant); opacity: .85; }
.sm-credit b, .sm-credit-name { color: var(--primary); font-weight: 800; letter-spacing: .08em; }

/* v0.24 Admin → Tools */
.sm-adm-doctor__sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; margin: 10px 0; background: var(--surface-container); }
.sm-adm-doctor__sum small { margin-left: auto; color: var(--on-surface-variant); }
.sm-adm-doctor__sum.is-ok { color: var(--success, #3ddc84); }
.sm-adm-doctor__sum.is-warn { color: var(--warning, #ffb020); }
.sm-adm-doctor__sum b { color: var(--on-surface); }
.sm-adm-checks { display: grid; gap: 8px; }
.sm-adm-check { padding: 10px 12px; border-radius: 12px; background: var(--surface-container-low, var(--surface-container)); border: 1px solid var(--outline-variant, rgba(255,255,255,.08)); }
.sm-adm-check__head { display: flex; align-items: center; gap: 10px; }
.sm-adm-check__label { flex: 1; font-size: .9rem; }
.sm-adm-check__count { font-variant-numeric: tabular-nums; }
.sm-adm-check__icon svg { width: 18px; height: 18px; }
.sm-adm-check.is-ok .sm-adm-check__icon { color: var(--success, #3ddc84); }
.sm-adm-check.is-ok .sm-adm-check__count { color: var(--on-surface-variant); }
.sm-adm-check.is-warn .sm-adm-check__icon, .sm-adm-check.is-warn .sm-adm-check__count { color: var(--warning, #ffb020); }
.sm-adm-check.is-bad .sm-adm-check__icon, .sm-adm-check.is-bad .sm-adm-check__count { color: var(--error, #ff5d5d); }
.sm-adm-check.is-info .sm-adm-check__icon, .sm-adm-check.is-info .sm-adm-check__count { color: var(--primary); }
.sm-adm-check__sample { margin: 6px 0 0 28px; padding: 0; list-style: disc; font-size: .78rem; color: var(--on-surface-variant); }
.sm-adm-tl__results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sm-adm-tl { margin-top: 12px; }
.sm-adm-tl__who { display: grid; gap: 2px; }
.sm-adm-tl__who small { color: var(--on-surface-variant); }
.sm-adm-tl__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.sm-adm-tl__stats span { display: grid; text-align: center; padding: 10px 4px; border-radius: 12px; background: var(--surface-container); font-size: .72rem; color: var(--on-surface-variant); }
.sm-adm-tl__stats b { font-size: 1.1rem; color: var(--on-surface); }
.sm-adm-tl h4 { margin: 14px 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--on-surface-variant); }
.sm-adm-tl__list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.sm-adm-tl__list li small { display: block; color: var(--on-surface-variant); font-size: .76rem; }
.sm-adm-tl__item.is-current b { color: var(--primary); }
.sm-adm-tag { font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: var(--surface-container-high); }
.sm-adm-tag.is-bad { color: var(--error, #ff5d5d); }
.sm-adm-tag.is-ok { color: var(--success, #3ddc84); }
.sm-maint-wall { z-index: 1300; }
.sm-maint-wall .logo-mark { margin: 0 auto 12px; }
.sm-maint-wall .auth-card { text-align: center; }

/* v0.24: leaderboard header labels (KILLS / PLACE / TOTAL) collided on 360dp phones. */
.v18-lb__head .v18-lb__num { letter-spacing: .02em; font-size: 9.5px; white-space: nowrap; }
.v18-lb__head, .v18-lb__row { column-gap: 8px; }
.sm-maint-wall .logo-mark { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; font-size: 32px; font-weight: 800; color: #1A1300; background: var(--gold-grad, linear-gradient(135deg, #FFE27A, #FFB800)); box-shadow: var(--gold-glow, 0 8px 28px rgb(255 200 61 / .35)); }
/* Admin → Tools icons: SMIcons SVGs have no intrinsic size. */
.sm-adm-doctor__sum svg, .sm-adm-check__icon svg, .sm-adm-head h3 svg, .sm-adm-search svg, .sm-adm-check .btn svg { width: 20px; height: 20px; flex: none; }
.sm-adm-head h3 { display: flex; align-items: center; gap: 8px; }
.sm-adm-check__icon { display: inline-flex; }
.sm-adm-check.is-ok .sm-adm-check__icon { color: var(--success, #3ddc84); }
.sm-adm-check.is-warn .sm-adm-check__icon { color: var(--warning, #ffb020); }
.sm-adm-check.is-bad .sm-adm-check__icon { color: var(--error, #ff5d5d); }