/* ScrimMate v1.0.0 polish layer — brand logo, fragger list, graphics studio extras, native feel.
   Loaded last so it can settle small layout issues without touching the older layers. */

/* Brand mark: the real helmet logo everywhere the old gold "S" tile was used. */
.logo-mark, .sm-logo-mark, .sm-app-shell__brand .sm-logo-mark, .boot .logo-mark, .sm-maint-wall .logo-mark, .setup-required-card .logo-mark {
  background: #0B1220 url("../brand/logo-192.webp") center / cover no-repeat !important;
  color: transparent !important; font-size: 0 !important; text-shadow: none !important;
  box-shadow: 0 6px 20px -8px rgb(56 189 248 / .55), inset 0 0 0 1px rgb(255 255 255 / .08) !important;
}
.sm-app-shell__brand .sm-logo-mark { border-radius: 10px; }
.boot .logo-mark { animation: sm-logo-in .5s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes sm-logo-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

/* Scrim detail: title gets the full width, status pill never squeezes it. */
.scrim-detail-hero-top { display: flex; flex-wrap: wrap-reverse; align-items: flex-start; justify-content: space-between; gap: 10px; }
.scrim-detail-hero-top > div:first-child { flex: 1 1 220px; min-width: 0; }
.scrim-detail-title { overflow-wrap: anywhere; text-wrap: balance; }
.scrim-status-pill { flex: 0 0 auto; white-space: nowrap; }

/* Match planner: shift chips stay on one tidy row (scrolls on very small screens). */
.v1-planner__shift { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 6px !important; }
.v1-planner__shift::-webkit-scrollbar { display: none; }
.v1-planner__shift .btn { flex: 0 0 auto; min-width: 44px; padding-inline: 10px; }
.v1-planner__shift small { flex: 0 0 auto; white-space: nowrap; }

/* Horizontal tab strips: soft edge fade so cut-off tabs read as "scroll for more". */
.sm-adm-tabs {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%);
  padding-inline: 2px 28px !important; scroll-padding-inline: 2px 28px;
}

/* Leaderboard header + view switch */
.sm-lb-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 4px 0 0; color: var(--on-surface-variant); font-size: .86rem; }
.sm-lb-sub b { color: var(--on-surface); font-weight: 750; }
.sm-lb-sub span { display: inline-flex; align-items: center; gap: 4px; }
.sm-lb-view { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 12px 0 4px; }
.sm-lb-view::-webkit-scrollbar { display: none; }
.sm-lb-view button { flex: 1 0 auto; }
.sm-lb-actions { flex-wrap: wrap; }

/* Fragger list */
.sm-frag-section { display: grid; gap: 12px; }
.sm-frag__summary { display: grid; gap: 10px; }
.sm-frag__mvp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px;
  background: radial-gradient(120% 140% at 0% 0%, rgb(255 205 70 / .22), transparent 60%), var(--surface-container); border: 1px solid color-mix(in srgb, #FFD34D 38%, transparent);
  animation: sm-rise .42s var(--sm-ease-out, cubic-bezier(.2, .8, .2, 1)) both; }
.sm-frag__crown { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--gold-grad, linear-gradient(135deg, #FFE27A, #FFB800)); color: #1F1600; }
.sm-frag__crown svg { width: 24px; height: 24px; fill: currentColor; }
.sm-frag__mvp > span:nth-child(2) { display: grid; min-width: 0; }
.sm-frag__mvp small { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-variant); }
.sm-frag__mvp b { font-size: 1.12rem; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.sm-frag__mvp em { font-style: normal; font-size: .8rem; color: var(--on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-frag__mvp strong { display: grid; justify-items: end; font-size: 1.9rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: #FFD34D; }
.sm-frag__mvp strong small { font-size: 10px; letter-spacing: .08em; color: var(--on-surface-variant); }
.sm-frag__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.sm-frag__stats span { display: grid; padding: 10px 12px; border-radius: 14px; background: var(--surface-container); border: 1px solid var(--v18-hairline, var(--outline-variant)); }
.sm-frag__stats b { font-size: 1.2rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.sm-frag__stats small { font-size: .72rem; color: var(--on-surface-variant); }
.sm-frag__search { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 44px; border-radius: 14px; background: var(--surface-container); border: 1px solid var(--outline-variant); color: var(--on-surface-variant); }
.sm-frag__search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.sm-frag__search svg { width: 18px; height: 18px; flex: none; }
.sm-frag__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--on-surface); font: inherit; font-size: .92rem; }
.sm-frag { display: grid; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sm-frag::-webkit-scrollbar { display: none; }
.sm-frag__row { display: grid; grid-template-columns: 34px minmax(120px, 1fr) repeat(var(--cols, 0), 34px) 52px; align-items: center; gap: 6px; padding: 9px 12px; min-width: min-content;
  border-radius: 14px; background: var(--surface-container); border: 1px solid var(--v18-hairline, var(--outline-variant));
  animation: sm-rise .34s var(--sm-ease-out, cubic-bezier(.2, .8, .2, 1)) both; }
.sm-frag__row:nth-child(2) { animation-delay: 20ms; } .sm-frag__row:nth-child(3) { animation-delay: 40ms; } .sm-frag__row:nth-child(4) { animation-delay: 60ms; } .sm-frag__row:nth-child(n+5) { animation-delay: 80ms; }
.sm-frag__head { background: transparent; border-color: transparent; padding-block: 2px; font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-variant); animation: none; }
.sm-frag__who { display: grid; min-width: 0; }
.sm-frag__who b { font-size: 14px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.sm-frag__who small { font-size: 11.5px; color: var(--on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-frag__m { text-align: center; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--on-surface-variant); }
.sm-frag__m.is-na { opacity: .45; }
.sm-frag__k { text-align: right; font-size: 16px; font-weight: 850; font-variant-numeric: tabular-nums; }
.sm-frag__head .sm-frag__k { font-size: 10.5px; }
.sm-frag__row.is-top1 { border-color: color-mix(in srgb, #FFD34D 45%, transparent); background: linear-gradient(90deg, rgb(255 211 77 / .12), transparent 70%), var(--surface-container); }
.sm-frag__row.is-top1 .v18-lb__rank { background: var(--gold-grad); color: #1F1600; }
.sm-frag__row.is-top2 .v18-lb__rank { background: linear-gradient(135deg, #E8EAF0, #A9AEBB); color: #1A1C22; }
.sm-frag__row.is-top3 .v18-lb__rank { background: linear-gradient(135deg, #F0B98A, #B9773F); color: #2A1405; }
.sm-frag__row.is-top1 .sm-frag__k { color: #E8B400; }
:root:not([data-theme="light"]) .sm-frag__row.is-top1 .sm-frag__k { color: #FFD34D; }
.sm-frag__none, .sm-frag__note { margin: 4px 2px 0; }

/* Graphics studio extras */
.v1-gs__preview { position: relative; min-height: 220px; gap: 10px; color: #fff; }
.v1-gs__preview canvas { opacity: 0; transform: scale(.985); transition: opacity .28s ease, transform .36s cubic-bezier(.2, .8, .2, 1); }
.v1-gs__preview canvas.is-in { opacity: 1; transform: none; }
.v1-gs__spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .18); border-top-color: var(--primary, #FFC83D); animation: sm-spin .8s linear infinite; }
@keyframes sm-spin { to { transform: rotate(360deg); } }
.v1-gs .v1-seg[data-gs-key="template"] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.v1-gs .v1-seg[data-gs-key="template"]::-webkit-scrollbar { display: none; }
.v1-gs .v1-seg button { flex: 0 0 auto; transition: background-color .18s ease, color .18s ease, transform .12s ease; }
.v1-gs .v1-seg button:active { transform: scale(.95); }
.v1-gs__hostsave { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.v1-check { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--on-surface-variant); }
.v1-check input { width: 18px; height: 18px; accent-color: var(--primary); }
.v1-gs__share button { transition: transform .12s ease, background-color .18s ease; }
.v1-gs__share button:active { transform: scale(.94); }

/* Native feel: pressed states, image fade-in, smoother long lists. */
:where(.btn, .sm-scrim-card, .sm-match-card, .sm-team-card, .sm-home-card, .sm-list-row, .v18-lb__row, .sm-frag__row, .scrim-stat-tile) { -webkit-tap-highlight-color: transparent; }
:where(.sm-scrim-card, .sm-match-card, .sm-team-card, .sm-home-card, .sm-list-row) { transition: transform .14s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease; }
:where(.sm-scrim-card, .sm-match-card, .sm-team-card, .sm-home-card, .sm-list-row):active { transform: scale(.985); }
:where(.btn):active:not(:disabled) { transform: scale(.97); }
img[loading="lazy"] { transition: opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .boot .logo-mark, .sm-frag__row, .sm-frag__mvp, .v1-gs__preview canvas { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  :where(.sm-scrim-card, .sm-match-card, .sm-team-card, .sm-home-card, .sm-list-row, .btn):active { transform: none; }
}

/* Login brand mark: bigger, the icon's own cyan glow instead of the gold frame. */
.sm-auth-logo.logo-mark { width: 76px !important; height: 76px !important; border-radius: 22px !important; border: 0 !important; outline: 0 !important;
  box-shadow: 0 10px 34px -10px rgb(56 189 248 / .65), 0 0 0 1px rgb(148 197 255 / .16) !important; animation: sm-logo-in .5s cubic-bezier(.2, .9, .3, 1.2) both; }
@media (prefers-reduced-motion: reduce) { .sm-auth-logo.logo-mark { animation: none !important; } }