/* New design ("feel"): loaded after styles.css, only while it is switched on for the viewer
   (Admin → Settings → New areas: off / test / live). Rounder corners, soft depth, raised controls,
   press feedback, toasts, a loading bar and page cross-fades. */

/* Depth: soft layered shadows in light mode; in dark mode (where shadows vanish on black) a faint
   light edge on top and a gentle gradient. "Soft" controls look raised and get pressed in. */
:root {
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(20, 20, 30, 0.05), 0 12px 32px -16px rgba(20, 20, 30, 0.18);
  --card-bg: var(--surface);
  --card-border: rgba(20, 20, 30, 0.06);
  --card-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 14px 34px -18px rgba(20, 20, 30, 0.18);
  --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(20, 20, 30, 0.05);
  --tile-lift: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 28px -14px rgba(20, 20, 30, 0.3);
  --soft: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(20, 20, 30, 0.08), 0 4px 12px -4px rgba(20, 20, 30, 0.1);
  --soft-pressed: inset 0 2px 5px rgba(20, 20, 30, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  --well: inset 0 1px 3px rgba(20, 20, 30, 0.08);
  --toast-bg: #1d1d1f; --toast-fg: #ffffff; --toast-border: transparent; --toast-ok: #34c77b; --toast-icon: #ffffff;
  --glow: 0.16;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-color="light"]) {
    --shadow: 0 14px 36px -14px rgba(0, 0, 0, 0.85);
    --card-bg: linear-gradient(180deg, #1a1a1d 0, #151517 160px);
    --card-border: rgba(255, 255, 255, 0.06);
    --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 44px -26px rgba(0, 0, 0, 0.95);
    --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    --tile-lift: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 32px -16px rgba(0, 0, 0, 0.95);
    --soft: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 8px -2px rgba(0, 0, 0, 0.7);
    --soft-pressed: inset 0 2px 6px rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    --well: inset 0 1px 3px rgba(0, 0, 0, 0.55);
    --toast-bg: #2a2a2f; --toast-fg: #f5f5f7; --toast-border: rgba(255, 255, 255, 0.08); --toast-ok: #4fd18b; --toast-icon: #0b0b0d;
    --glow: 0.24;
  }
}
:root[data-color="dark"] {
  --shadow: 0 14px 36px -14px rgba(0, 0, 0, 0.85);
  --card-bg: linear-gradient(180deg, #1a1a1d 0, #151517 160px);
  --card-border: rgba(255, 255, 255, 0.06);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 44px -26px rgba(0, 0, 0, 0.95);
  --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --tile-lift: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 32px -16px rgba(0, 0, 0, 0.95);
  --soft: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 8px -2px rgba(0, 0, 0, 0.7);
  --soft-pressed: inset 0 2px 6px rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --well: inset 0 1px 3px rgba(0, 0, 0, 0.55);
  --toast-bg: #2a2a2f; --toast-fg: #f5f5f7; --toast-border: rgba(255, 255, 255, 0.08); --toast-ok: #4fd18b; --toast-icon: #0b0b0d;
  --glow: 0.24;
}

/* =========================================================================
   Feel: every press answers, cards come up to meet the pointer, pages glide,
   confirmations pop up. Motion is switched off for people who turned
   animations off in their system (see the end of this block).
   ========================================================================= */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-pop: cubic-bezier(.34, 1.45, .64, 1); }

/* Buttons: raised, give way when pressed; the main button glows a little in its colour */
.btn { position: relative; -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, box-shadow .2s, transform .12s var(--ease-out), filter .15s; }
.btn:active:not(:disabled) { transform: scale(.965); }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 1.02rem; }
.btn-primary, .btn-discord { --b: var(--accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--b) 82%, #fff) 0%, var(--b) 58%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px -10px color-mix(in srgb, var(--b) 90%, transparent); }
.btn-primary:hover { --b: var(--accent-hover); background: linear-gradient(180deg, color-mix(in srgb, var(--b) 82%, #fff) 0%, var(--b) 58%); }
.btn-discord { --b: var(--discord); color: #fff; }
.btn-discord:hover { --b: #5865f2; background: linear-gradient(180deg, color-mix(in srgb, var(--b) 82%, #fff) 0%, var(--b) 58%); }
@media (hover: hover) {
  .btn-primary:hover:not(:disabled), .btn-discord:hover { transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 24px -10px color-mix(in srgb, var(--b) 95%, transparent); }
}
.btn-primary:active:not(:disabled), .btn-discord:active { transform: scale(.965); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25); filter: brightness(.95); }
.btn-secondary, .btn-outline, .btn-danger { box-shadow: var(--soft); }
.btn-secondary:active, .btn-outline:active, .btn-danger:active { box-shadow: var(--soft-pressed); }
.btn-primary { --btn-fg: var(--accent-text); }
.btn-discord { --btn-fg: #fff; }
.btn-danger { --btn-fg: var(--loss); }
.btn-ghost { --btn-fg: var(--accent); }

/* A form on its way: the pressed button shows a spinner instead of its label; a second press does nothing */
.btn[data-busy] { color: transparent !important; pointer-events: none; }
.btn[data-busy] > * { visibility: hidden; }
.btn[data-busy]::after { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--btn-fg, var(--text)); border-inline-end-color: transparent; animation: s2s-spin .7s linear infinite; }
@keyframes s2s-spin { to { transform: rotate(360deg); } }

/* Small round controls and chips: raised, pressed in when tapped */
.icon-btn, .lang-form select, .chips a, .filter-bar select { box-shadow: var(--soft); transition: background .15s, color .15s, box-shadow .15s, transform .12s var(--ease-out); }
.icon-btn:active, .chips a:active { box-shadow: var(--soft-pressed); transform: scale(.95); }
.chips a[aria-current] { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .55); }
.main-nav a { transition: background .15s, color .15s, transform .12s var(--ease-out); }
.main-nav a:active { transform: scale(.95); }
.main-nav a[aria-current="page"] { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
/* Fields look like a small well */
.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .form select, .form textarea, .search-row input, .header-search { box-shadow: var(--well); }
.header-search:focus-within { box-shadow: var(--well), 0 0 0 2px var(--accent); }

/* Tiles inside cards: slightly raised; clickable ones lift under the pointer and give way when pressed */
.tour-card, .clan-card, .match-card, .explore-player, .lfg-card, .player-grid li { box-shadow: var(--tile-shadow); }
.tour-card, .clan-card, .match-card, .explore-player, .clan-row, .media-thumb {
  transition: background .15s, transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }
@media (hover: hover) {
  .tour-card:hover, .clan-card:hover, .match-card:hover, .explore-player:hover { transform: translateY(-2px); box-shadow: var(--tile-lift); }
  .media-thumb:hover { transform: translateY(-2px); }
}
.tour-card:active, .clan-card:active, .match-card:active, .explore-player:active, .clan-row:active { transform: scale(.985); transition-duration: .08s; }

/* Tier stones glow a little in their colour */
.tier-gem { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28), 0 0 10px -1px color-mix(in srgb, var(--tc) 70%, transparent); }
.tier-placement .tier-gem { box-shadow: inset 0 0 0 2px var(--tc); }

/* Home (signed out): a soft glow and a dot pattern behind the headline, one clear main action */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -1; inset: -28px -20px auto; height: 460px; pointer-events: none;
  background:
    radial-gradient(55% 60% at 50% 32%, color-mix(in srgb, var(--accent) calc(var(--glow) * 100%), transparent), transparent 72%),
    radial-gradient(circle, color-mix(in srgb, var(--muted) 32%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 38%, #000 35%, transparent 78%); mask-image: radial-gradient(70% 70% at 50% 38%, #000 35%, transparent 78%); }
/* Phones: the page gutter is 14px, so the glow may only reach that far out (else the page scrolls sideways) */
@media (max-width: 476px) { .hero::before { inset-inline: -14px; } }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 18px; }
.hero-cta .btn svg { flex: none; }
.hero .hero-search { max-width: 560px; }
.hero-more { margin: 14px 0 0; font-weight: 600; font-size: .92rem; }
@media (max-width: 480px) { .hero-cta { width: 100%; } .hero-cta .btn { flex: 1 1 100%; } }

/* Home (signed in): your own card on top */
.me-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 18px; margin-top: 4px;
  padding: 22px; border-radius: calc(var(--radius) + 6px); background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.me-card::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 90% at 0% 0%, color-mix(in srgb, var(--accent) calc(var(--glow) * 80%), transparent), transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--muted) 26%, transparent) 1px, transparent 1.6px) 0 0 / 16px 16px;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 60%); mask-image: linear-gradient(115deg, #000 0%, transparent 60%); }
.me-top { display: flex; align-items: center; gap: 16px; }
.me-top > .grow { flex: 1 1 200px; }
.me-live { align-self: flex-start; }
.me-ava .avatar { display: block; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--card-border), 0 10px 24px -10px rgba(0, 0, 0, .5); }
.me-hello { margin: 0; color: var(--muted); font-weight: 600; font-size: .92rem; }
.me-name { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.me-name a { color: var(--text); }
.me-sub { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--muted); font-size: .88rem; }
.me-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; align-items: center; }
.me-stat { display: flex; flex-direction: column; gap: 4px; }
.me-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.me-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.me-num { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .me-card { padding: 18px; gap: 16px; }
  .me-top { flex-wrap: wrap; }
  .me-live { order: -1; flex-basis: 100%; }
  .me-body { grid-template-columns: 1fr; }
}

/* Round quick buttons with a label underneath */
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 560px; margin-inline: auto; }
.quick-ico svg { width: 24px; height: 24px; }
.quick-ico svg.qi { width: 30px; height: 30px; overflow: visible; }
.quick-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 2px; color: var(--text); font-size: .84rem; font-weight: 600; text-align: center;
  -webkit-tap-highlight-color: transparent; }
.quick-btn:hover { text-decoration: none; }
.quick-ico { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); box-shadow: var(--soft);
  transition: transform .15s var(--ease-out), box-shadow .15s, background .15s; }
.quick-btn.primary .quick-ico { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 22px -10px var(--accent); }
@media (hover: hover) { .quick-btn:hover .quick-ico { transform: translateY(-2px); } }
.quick-btn:active .quick-ico { transform: scale(.92); box-shadow: var(--soft-pressed); }
.quick-badge { position: absolute; top: -2px; inset-inline-end: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: .7rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }

/* "+42 this week" */
.delta-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--muted); box-shadow: var(--soft); vertical-align: middle; font-family: var(--font); letter-spacing: 0; }
.delta-chip.up { background: var(--win-soft); color: var(--win); }
.delta-chip.down { background: var(--loss-soft); color: var(--loss); }
.delta-chip-when { font-weight: 600; opacity: .8; }
.tier-rating .delta-chip { margin-inline-start: 10px; vertical-align: 6px; }

/* Progress at a glance: an arc from your tier to the next one */
.tprog { margin: 4px 0 2px; }
.tprog-arc { display: block; width: 100%; height: auto; overflow: visible; }
.tprog-track { fill: none; stroke: var(--surface-3); stroke-width: 4; stroke-linecap: round; }
.tprog-fill { fill: none; stroke: var(--tc); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tc) 70%, transparent)); }
.tprog-glow { fill: var(--tc); opacity: .25; transform-box: fill-box; transform-origin: center; animation: tprog-pulse 2.4s ease-in-out infinite; }
.tprog-dot { fill: var(--tc); stroke: var(--surface); stroke-width: 2.5; }
@keyframes tprog-pulse { 50% { transform: scale(1.4); opacity: .1; } }
.tprog-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: -4px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.tprog-ends > span { display: inline-flex; align-items: center; gap: 6px; }
.tprog-ends b { color: var(--text); font-variant-numeric: tabular-nums; }
.tprog-ends .tier-gem { width: 10px; height: 10px; border-radius: 2px; }
.tprog-caption { margin: 6px 0 0; text-align: center; font-size: .86rem; font-weight: 700; }
.tier-card .tprog { margin: 10px 0 14px; }

/* Nothing here (yet): a symbol and a faint dot pattern instead of a bare grey line */
.empty { position: relative; isolation: isolate; padding: 30px 16px 24px; border-radius: var(--radius-sm); }
.empty::before { content: ''; display: block; width: 30px; height: 30px; margin: 0 auto 10px; background: var(--muted); opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4 15 15M12.5 17.5l5-5M16 16l3.5 3.5M20 4 9 15M6.5 12.5l5 5M8 16l-3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4 15 15M12.5 17.5l5-5M16 16l3.5 3.5M20 4 9 15M6.5 12.5l5 5M8 16l-3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.empty::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--muted) 30%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(55% 70% at 50% 50%, #000 15%, transparent 78%); mask-image: radial-gradient(55% 70% at 50% 50%, #000 15%, transparent 78%); }

/* Confirmation after an action: pops up at the bottom (in thumb reach on phones), leaves by itself, tap closes it */
.toast { position: fixed; z-index: 80; inset-inline: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); margin: 0 auto; width: fit-content; max-width: 540px;
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; cursor: pointer;
  background: var(--toast-bg); color: var(--toast-fg); border: 1px solid var(--toast-border); box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .55);
  font-weight: 600; line-height: 1.35;
  animation: toast-in .5s var(--ease-pop) both, toast-out .35s var(--ease-out) var(--toast-stay, 7s) forwards; }
.toast:hover { animation-play-state: running, paused; }
.toast.leaving { animation: toast-out .25s var(--ease-out) forwards; }
.toast-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--toast-ok); color: var(--toast-icon);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--toast-ok) 22%, transparent); animation: toast-icon .5s .12s var(--ease-pop) both; }
.toast.warn .toast-icon { background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.toast-icon .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: toast-draw .35s .32s var(--ease-out) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(28px) scale(.92); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(18px) scale(.97); visibility: hidden; } }
@keyframes toast-icon { from { transform: scale(.4); } }
@keyframes toast-draw { to { stroke-dashoffset: 0; } }

/* Thin bar on top while the next page is loading (only shows up when it takes a moment) */
.loadbar { position: fixed; z-index: 90; top: 0; inset-inline: 0; height: 3px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
[dir="rtl"] .loadbar { transform-origin: 100% 50%; }
.loadbar.on { opacity: 1; animation: loadbar 9s cubic-bezier(.08, .7, .2, 1) .12s both; }
.loadbar.done { opacity: 0; transform: scaleX(1); transition: transform .2s var(--ease-out), opacity .3s .15s; }
@keyframes loadbar { from { transform: scaleX(0); } 15% { transform: scaleX(.4); } to { transform: scaleX(.94); } }

/* A part of the page that switched in place fades in */
[data-swap-root].swap-in { animation: swap-in .24s var(--ease-out) both; }
@keyframes swap-in { from { opacity: .35; transform: translateY(4px); } }

/* Page changes: a quick cross-fade instead of a hard cut; on bigger screens the header stays put */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .16s var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-in .24s var(--ease-out) both; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) { .site-header { view-transition-name: site-header; } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:active, .chips a:active, .icon-btn:active, .main-nav a:active, .quick-btn:active .quick-ico,
  .tour-card:active, .clan-card:active, .match-card:active, .explore-player:active, .clan-row:active { transform: none; }
  .toast-icon .draw { stroke-dashoffset: 0; }
}
/* An empty area can offer the next step */
div.empty > p { margin: 0; }
div.empty > .btn { margin-top: 12px; }
/* Right-to-left (Arabic): the way to the next tier runs from right to left, the glow sits behind the picture */
[dir="rtl"] .tprog-arc, [dir="rtl"] .me-card::before { transform: scaleX(-1); }

/* Footer note for testers while the new design is still a test */
.beta-note { margin: 0 auto; padding-block: 0 18px; font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.beta-note .beta-pill { margin: 0; }

/* "My clan" quick button: the clan's logo, or its tag when it has none */
.quick-ico .quick-crest { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; margin: 0;
  font-weight: 800; font-size: .9rem; letter-spacing: .01em; color: var(--text); overflow: hidden; }
.quick-ico img.quick-crest { object-fit: cover; padding: 0; background: var(--surface-2); }
.quick-ico .quick-crest[data-len="4"] { font-size: .78rem; }
.quick-ico .quick-crest[data-len="5"] { font-size: .68rem; }
.quick-ico .quick-crest[data-len="6"] { font-size: .6rem; }
.quick-ico .quick-crest[data-len="7"], .quick-ico .quick-crest[data-len="8"] { font-size: .52rem; }

/* Quick-button icons: soft fills, and a little movement under the pointer */
.qi .qi-fill { fill: currentColor; fill-opacity: .16; }
.qi .qi-solid { fill: currentColor; stroke: none; }
.qi .lt-seal { fill: var(--accent); stroke: none; }
.quick-btn.primary .qi .qi-fill { fill-opacity: .24; }
.qi .sw, .qi .sw-spark { transform-box: view-box; transform-origin: 16px 14px; }
.qi .sw-shape > * { fill: currentColor; stroke: none; }
.qi .sw-b .sw-shape > * { stroke: var(--qi-bg, var(--surface-2)); stroke-width: 1.6; paint-order: stroke; }
.quick-btn.primary .qi { --qi-bg: var(--accent); }
.qi .sw-spark { stroke: #ffd36a; opacity: 0; }
.qi .tr { transform-box: fill-box; transform-origin: 50% 100%; }
.qi .tr-star, .qi .lt-seal { transform-box: fill-box; transform-origin: center; }
.qi-shield { transform-origin: 50% 60%; }
@media (hover: hover) {
  .quick-btn:hover .sw-a, .quick-btn:focus-visible .sw-a { animation: sw-a .62s var(--ease-out); }
  .quick-btn:hover .sw-b, .quick-btn:focus-visible .sw-b { animation: sw-b .62s var(--ease-out); }
  .quick-btn:hover .sw-spark, .quick-btn:focus-visible .sw-spark { animation: sw-spark .62s var(--ease-out); }
  .quick-btn:hover .tr, .quick-btn:focus-visible .tr { animation: tr-hop .6s var(--ease-out); }
  .quick-btn:hover .tr-star, .quick-btn:focus-visible .tr-star { animation: tr-twinkle .6s var(--ease-out); }
  .quick-btn:hover .lt-seal, .quick-btn:focus-visible .lt-seal { animation: lt-pulse .5s var(--ease-out); }
  .quick-btn:hover .qi-shield, .quick-btn:focus-visible .qi-shield { animation: sh-tilt .5s var(--ease-out); }
}
/* Phones have no pointer to hover with: the swords clash once when the card shows up */
@media (hover: none) {
  .me-card .sw-a { animation: sw-a .62s var(--ease-out) .5s; }
  .me-card .sw-b { animation: sw-b .62s var(--ease-out) .5s; }
  .me-card .sw-spark { animation: sw-spark .62s var(--ease-out) .5s; }
}
@keyframes sw-a { 35% { transform: rotate(20deg); } 62% { transform: rotate(-7deg); } 82% { transform: rotate(2deg); } }
@keyframes sw-b { 35% { transform: rotate(-20deg); } 62% { transform: rotate(7deg); } 82% { transform: rotate(-2deg); } }
@keyframes sw-spark { 0%, 52% { opacity: 0; transform: scale(.4); } 64% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes tr-hop { 40% { transform: translateY(-3px) rotate(-6deg); } 70% { transform: translateY(0) rotate(4deg); } }
@keyframes tr-twinkle { 50% { transform: scale(1.45); } }
@keyframes lt-pulse { 50% { transform: scale(1.3); } }
@keyframes sh-tilt { 30% { transform: rotate(-9deg); } 65% { transform: rotate(5deg); } }