/* speedingfines.gg talent trees (talents.js), rotation strips (rotation.js) and the spell tooltip (spells.js).
   Self-contained: works inside the logged-in shell and on the static guide pages. Dark only, like the game. */
.sftal, .sfrot, .sfs-float {
  --tg-gold: #ffd100; --tg-green: #1eff00; --tg-green2: #3fe03f; --tg-red: #ff2020; --tg-grey: #8a8a8a;
  --tg-panel: #0c0d12; --tg-line: rgba(255, 255, 255, 0.09); --tg-text: #eef0f4; --tg-muted: #9aa3b5;
  --tg-serif: "Friz Quadrata TT", "Friz Quadrata", "FrizQuadrata", Georgia, "Times New Roman", serif;
  --tg-head: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}

/* ================================================================== talent frame ==================== */
.sftal { position: relative; color: var(--tg-text); --cls: #c69b6d; }
.sftal[aria-busy="true"] { min-height: 420px; border-radius: 12px;
  background: linear-gradient(110deg, #0e1016 30%, #151821 50%, #0e1016 70%) 0 0 / 300% 100%; animation: sftal-load 1.4s linear infinite; }
@keyframes sftal-load { to { background-position: -150% 0; } }
.sftal-err { color: var(--tg-muted); padding: 30px 0; text-align: center; }

.sftal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin: 0 0 10px; }
.sftal-title { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; min-width: 0; }
.sftal-cls { font: 800 1.55rem/1 var(--tg-head); letter-spacing: 0.02em; text-transform: uppercase; color: var(--cls);
  text-shadow: 0 0 18px color-mix(in srgb, var(--cls) 35%, transparent); }
.sftal-split { font: 700 1.25rem/1 var(--tg-head); color: #fff; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.sftal-name { color: var(--tg-muted); font-size: 0.95rem; }
.sftal-pts { display: flex; gap: 8px; }
.sftal-pts > span { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 5px 12px 6px;
  border: 1px solid var(--tg-line); border-radius: 9px; background: rgba(255, 255, 255, 0.03); }
.sftal-pts small { font: 600 0.66rem/1.1 var(--tg-head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tg-muted); }
.sftal-pts b { font: 800 1.45rem/1.05 var(--tg-head); font-variant-numeric: tabular-nums; }
.sftal-left b { color: var(--tg-green2); }
.sftal-left.is-zero b { color: var(--tg-muted); }
.is-readonly .sftal-left b { color: #fff; }

.sftal-ptabs { display: none; }
.sftal-trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sftal-tree { position: relative; min-width: 0; border-radius: 10px; overflow: hidden; isolation: isolate;
  border: 1px solid #3b3426; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), inset 0 0 0 2px rgba(255, 209, 0, 0.07), 0 6px 24px rgba(0, 0, 0, 0.45);
  background: #08090c; }
.sftal-tree::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg, none) center top / cover no-repeat;
  opacity: 0.62; filter: saturate(0.9); }
.sftal-tree::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 40%, transparent 30%, rgba(0, 0, 0, 0.55) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1) 18%, rgba(0, 0, 0, 0.35)); }
.sftal-th { display: flex; align-items: center; gap: 9px; padding: 9px 12px 8px; border-bottom: 1px solid rgba(255, 209, 0, 0.14);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35)); }
.sftal-th img { width: 24px; height: 24px; border-radius: 4px; border: 1px solid #000; box-shadow: 0 0 0 1px #5b5141; }
.sftal-th h3 { margin: 0; font: 400 1.05rem/1 var(--tg-serif); color: var(--tg-gold); text-shadow: 1px 1px 0 #000; letter-spacing: 0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sftal-tpts { margin-left: auto; font: 800 1.2rem/1 var(--tg-head); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 1px 1px 0 #000; }
.sftal-treset { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.5); color: var(--tg-muted); border-radius: 6px;
  font: 600 0.72rem/1 var(--tg-head); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 7px; cursor: pointer; }
.sftal-treset:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }

.sftal-grid { position: relative; aspect-ratio: 4 / var(--rows); margin: 8px 8px 12px; }
.sftal-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sftal-ar-sh { fill: none; stroke: rgba(0, 0, 0, 0.75); stroke-width: 11; stroke-linejoin: round; }
.sftal-ar-ln { fill: none; stroke: #5d5d5d; stroke-width: 6; stroke-linejoin: round; }
.sftal-ar-hd { fill: #5d5d5d; stroke: rgba(0, 0, 0, 0.75); stroke-width: 2; }
.sftal-ar.is-lit .sftal-ar-ln { stroke: #e7b800; }
.sftal-ar.is-lit .sftal-ar-hd { fill: #e7b800; }

.sftal-t { position: absolute; left: calc(var(--c) * 25%); top: calc(var(--r) * 100% / var(--rows)); width: 25%; height: calc(100% / var(--rows));
  display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sftal-t:focus-visible { outline: none; }
.sftal-t:focus-visible .sftal-ic { outline: 2px solid #fff; outline-offset: 2px; }
.sftal-ic { position: relative; width: 64%; aspect-ratio: 1; border-radius: 7px; overflow: hidden; background: #000;
  border: 2px solid #4a4a4a; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, 0.8); transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s; }
.sftal-ic img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.sftal-ic::after { content: ""; position: absolute; inset: 0; border-radius: 5px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 6px 10px rgba(255, 255, 255, 0.08); }
.sftal-t:hover .sftal-ic { transform: translateY(-1px) scale(1.04); }
.sftal-t:active .sftal-ic { transform: scale(0.96); }
.sftal-t.is-locked .sftal-ic img, .sftal-t.is-off .sftal-ic img { filter: grayscale(1) brightness(0.55) contrast(0.9); }
.sftal-t.is-off .sftal-ic { opacity: 0.55; border-color: #2c2c2c; }
.sftal-t.is-avail .sftal-ic { border-color: var(--tg-green2); box-shadow: 0 0 0 1px #000, 0 0 10px rgba(30, 255, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.8); }
.sftal-t.is-max .sftal-ic { border-color: var(--tg-gold); box-shadow: 0 0 0 1px #000, 0 0 12px rgba(255, 209, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.8); }
.sftal-rk { position: absolute; right: 8%; bottom: 6%; min-width: 2.6em; padding: 1px 4px; border-radius: 4px; text-align: center;
  font: 700 clamp(0.62rem, 1.05vw, 0.78rem)/1.25 var(--tg-head); letter-spacing: 0.03em; font-variant-numeric: tabular-nums;
  color: #9a9a9a; background: rgba(0, 0, 0, 0.92); border: 1px solid #5a5a5a; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.sftal-t.is-avail .sftal-rk { color: var(--tg-green2); border-color: #2e6b2e; }
.sftal-t.is-max .sftal-rk { color: var(--tg-gold); border-color: #8a6f12; }
.sftal-cl { position: absolute; left: 10%; top: 4%; pointer-events: none; }
.sftal-cl-new { padding: 0 4px; border-radius: 3px; font: 800 0.58rem/1.4 var(--tg-head); letter-spacing: 0.08em; text-transform: uppercase;
  background: #1f8f3a; color: #fff; box-shadow: 0 0 0 1px #000; }
.sftal-cl-changed { width: 9px; height: 9px; border-radius: 50%; background: #f5b14c; box-shadow: 0 0 0 1.5px #000; left: 14%; top: 10%; }
.sftal-t.is-new .sftal-ic { animation: sftal-pulse 1.6s ease-out 2; }
.sftal-t.is-flash .sftal-ic { animation: sftal-pop 0.32s ease-out; }
.sftal-t.is-new::before { content: ""; position: absolute; width: 74%; aspect-ratio: 1; border-radius: 10px; border: 2px solid #fff;
  opacity: 0.85; pointer-events: none; animation: sftal-ring 1.6s ease-out infinite; }
@keyframes sftal-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
@keyframes sftal-ring { 0% { transform: scale(0.92); opacity: 0.9; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes sftal-pop { 0% { transform: scale(0.88); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
.sftal-t.is-shake .sftal-ic { animation: sftal-shake 0.36s; border-color: var(--tg-red); }
@keyframes sftal-shake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
.sftal.is-past .sftal-tree { filter: saturate(0.92); }

/* level slider + point order */
.sftal-order { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--tg-line); border-radius: 10px; background: rgba(255, 255, 255, 0.025); }
.sftal-lvbar { display: flex; align-items: center; gap: 10px; }
.sftal-step { flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.4);
  color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sftal-step:hover { border-color: rgba(255, 255, 255, 0.4); }
/* The input is 32px tall for an easy grab (phones too); the 8px bar is drawn on its track. pan-y: a sideways drag
   moves the slider, an up/down one still scrolls the page. */
.sftal-range { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 32px; margin: 0; padding: 0;
  background: transparent; cursor: pointer; touch-action: pan-y; }
.sftal-range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, var(--cls) var(--p, 0%), rgba(255, 255, 255, 0.12) var(--p, 0%)); }
.sftal-range::-moz-range-track { height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, var(--cls) var(--p, 0%), rgba(255, 255, 255, 0.12) var(--p, 0%)); }
.sftal-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: #fff;
  border: 3px solid var(--cls); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.sftal-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--cls); }
.sftal-range:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 99px; }
.sftal-lvout { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 8px; }
.sftal-lvout b { font: 800 1.15rem/1 var(--tg-head); letter-spacing: 0.04em; }
.sftal-lvout span { color: var(--tg-gold); font-family: var(--tg-serif); font-size: 0.95rem; }
.sftal-hint { margin: 8px 0 0; color: var(--tg-muted); font-size: 0.88rem; }
.sftal-link { border: 0; background: none; color: #8fb4ff; padding: 0; cursor: pointer; text-decoration: underline; font: inherit; }
.sftal-steps { margin-top: 10px; }
.sftal-steps summary { cursor: pointer; font: 700 0.8rem/1.4 var(--tg-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tg-muted); }
.sftal-steps ol { list-style: none; margin: 8px 0 0; padding: 0; columns: 2 300px; column-gap: 18px; }
.sftal-steps li { break-inside: avoid; }
.sftal-srow { display: grid; grid-template-columns: 3.6em 20px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; width: 100%;
  padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--tg-text); text-align: left; cursor: pointer; font-size: 0.9rem; }
.sftal-srow:hover { background: rgba(255, 255, 255, 0.05); }
.sftal-srow img { border-radius: 3px; border: 1px solid #000; }
.sftal-slv { font: 700 0.85rem/1 var(--tg-head); color: var(--tg-muted); font-variant-numeric: tabular-nums; }
.sftal-sname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sftal-srk { font: 700 0.8rem/1 var(--tg-head); color: var(--tg-green2); font-variant-numeric: tabular-nums; }
.sftal-stab { font: 600 0.68rem/1 var(--tg-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tg-muted); }
.sftal-steps li:not(.is-done):not(.is-part) .sftal-srow { opacity: 0.45; }
.sftal-steps li.is-part .sftal-srow { box-shadow: inset 3px 0 0 var(--cls); }
.sftal-removed { margin-top: 12px; color: var(--tg-muted); font-size: 0.88rem; }
.sftal-removed summary { cursor: pointer; }
.sftal-removed ul { margin: 6px 0 0; padding-left: 18px; columns: 3 200px; }
.sftal-removed b { color: #c9ccd4; font-weight: 600; }

/* embeds (guides) */
.sftal-embed { margin: 16px 0; padding: 14px; border: 1px solid var(--tg-line, rgba(255, 255, 255, 0.09)); border-radius: 12px; background: #0b0d12; }
.sftal-embed-h { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sftal-embed-h b { font: 700 1.15rem/1.2 "Barlow Condensed", system-ui, sans-serif; letter-spacing: 0.03em; color: #fff; }
.sftal-embed-h span { color: #9aa3b5; font-size: 0.88rem; }
.sftal-open { margin-left: auto; color: #8fb4ff; font-size: 0.88rem; text-decoration: none; }
.sftal-open:hover { color: #fff; }
.sftal-notes { margin: 10px 0 0; padding-left: 18px; color: #c9ccd4; font-size: 0.92rem; }
.sftal-src, .sfrot-src { margin: 8px 0 0; color: #687083; font-size: 0.8rem; }
.sftal .sr, .sftal-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1100px) {
  .sftal-ic { width: 68%; border-radius: 6px; }
}
@media (max-width: 760px) {
  .sftal-ptabs { display: flex; gap: 6px; margin: 0 0 8px; }
  .sftal-ptab { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); color: #c7ccd7; font: 600 0.88rem/1 system-ui, sans-serif; cursor: pointer; }
  .sftal-ptab img { border-radius: 4px; flex: none; }
  .sftal-ptab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sftal-ptab b { margin-left: auto; font: 800 1rem/1 var(--tg-head); color: #fff; }
  .sftal-ptab[aria-selected="true"] { border-color: var(--cls); background: color-mix(in srgb, var(--cls) 16%, transparent); color: #fff; }
  .sftal-trees { grid-template-columns: minmax(0, 1fr); }
  .sftal-tree:not(.is-focus) { display: none; }
  .sftal-tree { max-width: 440px; margin: 0 auto; width: 100%; }
  .sftal-ic { width: 70%; }
  .sftal-rk { font-size: 0.74rem; }
  .sftal-pts > span { min-width: 64px; padding: 4px 10px 5px; }
  .sftal-steps ol { columns: 1; }
  .sftal-srow { grid-template-columns: 3.4em 20px minmax(0, 1fr) auto; }
  .sftal-stab { display: none; }
}

/* ================================================================== spell tooltip ================== */
.sfs-float { position: fixed; z-index: 10000; pointer-events: none; max-width: min(360px, calc(100vw - 16px)); }
.sfs-float[hidden] { display: none; }
.sfs { display: flex; align-items: flex-start; gap: 4px; font-family: var(--tg-serif); font-size: 13px; line-height: 1.32; color: #fff;
  text-align: left; -webkit-font-smoothing: antialiased; }
.sfs-icon { flex: none; width: 44px; height: 44px; border-radius: 5px; border: 1px solid #5c5c5c; background: #000;
  box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, 0.6); }
.sfs-body { min-width: 220px; max-width: 310px; padding: 7px 10px 8px;
  background: linear-gradient(180deg, rgba(10, 13, 34, 0.985), rgba(5, 7, 20, 0.985)); border: 1px solid #b4b4b4; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9), inset 0 0 0 2px rgba(120, 120, 140, 0.35), 0 3px 14px rgba(0, 0, 0, 0.75); text-shadow: 1px 1px 0 #000; }
.sfs-line { margin: 0; overflow-wrap: anywhere; }
.sfs-lr { display: flex; justify-content: space-between; gap: 18px; }
.sfs-r { text-align: right; white-space: nowrap; color: #fff; }
.sfs-name { font-size: 14.5px; line-height: 1.25; margin-bottom: 1px; }
.sfs-name .sfs-r { color: #8c8c8c; font-size: 13px; }
.sfs-gold { color: var(--tg-gold); }
.sfs-white { color: #fff; }
.sfs-red { color: var(--tg-red); }
.sfs-green { color: var(--tg-green); }
.sfs-grey { color: #8c8c8c; }
.sfs-desc { margin-top: 2px; }
.sfs-next { margin-top: 8px; }
.sfs-hint { margin-top: 6px; font-size: 12px; }
.sfs-when { margin-top: 6px; color: #7fd2ff; }
.sfs-note { margin-top: 4px; color: #c9ccd4; font-size: 12px; }
.sfs-meta { margin-top: 6px; color: #8c8c8c; font-size: 12px; }
.sfs-new { margin-top: 6px; color: #4cc38a; font-size: 12px; font-family: system-ui, sans-serif; }
.sfs-changed { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-family: system-ui, sans-serif; font-size: 12px; }
.sfs-chg-h { color: #f5b14c; display: block; }
.sfs-classic { color: #9aa0ad; margin-top: 2px; }
.sfs-float.sfs-sheet { pointer-events: auto; left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom));
  max-width: none; max-height: 62vh; overflow-y: auto; padding: 36px 10px 10px; animation: sfs-up 0.16s ease-out;
  background: rgba(6, 8, 14, 0.97); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.7); }
@media (max-width: 900px) { .sfs-float.sfs-sheet { bottom: calc(72px + env(safe-area-inset-bottom)); max-height: calc(100vh - 150px); } }
.sfs-sheet .sfs { justify-content: center; }
.sfs-sheet .sfs-body { max-width: none; flex: 1; font-size: 14px; }
@keyframes sfs-up { from { transform: translateY(12px); opacity: 0; } }
.sfs-close { position: absolute; right: 4px; top: 2px; z-index: 2; width: 34px; height: 34px; border: 0; background: none; color: #bbb; font-size: 1.5rem; cursor: pointer; }
.sfs-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.sfs-act { padding: 11px 10px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.2); background: #151821; color: #fff;
  font: 700 1rem/1 system-ui, sans-serif; cursor: pointer; }
.sfs-act-add { background: #1f7a35; border-color: #2fa34a; }
.sfs-act:disabled { opacity: 0.4; }

/* ================================================================== rotation strip ================= */
.sfrot { color: var(--tg-text); margin: 16px 0; padding: 14px 16px; border: 1px solid var(--tg-line); border-radius: 12px; background: #0b0d12; }
.sfrot-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 4px; }
.sfrot-head b { font: 700 1.2rem/1.2 var(--tg-head); letter-spacing: 0.03em; color: #fff; }
.sfrot-head span { color: var(--tg-muted); font-size: 0.88rem; }
.sfrot-sec { margin-top: 12px; }
.sfrot-sh { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sfrot-sh h4 { margin: 0; font: 700 0.85rem/1.3 var(--tg-head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tg-gold); }
.sfrot-kind { font: 600 0.7rem/1 var(--tg-head); letter-spacing: 0.12em; text-transform: uppercase; color: #687083; }
.sfrot-snote { flex-basis: 100%; margin: 2px 0 0; color: #b6bcc8; font-size: 0.9rem; }
.sfrot-strip { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 6px; margin: 0; padding: 0; list-style: none; }
.sfrot-step { position: relative; display: flex; flex-direction: column; align-items: center; width: 92px; text-align: center; }
.sfrot-ic { position: relative; display: block; width: 48px; height: 48px; padding: 0; border: 2px solid #6b6b6b; border-radius: 8px; overflow: hidden;
  background: #000; box-shadow: 0 0 0 1px #000, 0 3px 10px rgba(0, 0, 0, 0.6); cursor: help; transition: transform 0.12s, border-color 0.12s; }
.sfrot-ic img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.sfrot-ic:hover, .sfrot-ic:focus-visible { transform: translateY(-2px); border-color: var(--tg-gold); outline: none; }
.sfrot-text { cursor: default; border-style: dashed; display: grid; place-items: center; }
.sfrot-glyph { color: #9aa3b5; font-size: 1.4rem; }
.is-offgcd .sfrot-ic { border-color: #3e82f7; }
.sfrot-cap { margin-top: 5px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sfrot-cap b { font: 600 0.84rem/1.15 system-ui, sans-serif; color: #fff; }
.sfrot-when { font-size: 0.76rem; line-height: 1.2; color: #7fd2ff; }
.sfrot-lv, .sfrot-tag { font: 600 0.62rem/1.3 var(--tg-head); letter-spacing: 0.08em; text-transform: uppercase; color: #8a93a6; }
.sfrot-tag { color: #8fb4ff; }
.sfrot-arrow { align-self: flex-start; width: 22px; height: 48px; flex: none; position: relative; }
.sfrot-arrow::before { content: ""; position: absolute; left: 1px; right: 7px; top: 23px; height: 2px; background: #6b7385; }
.sfrot-arrow::after { content: ""; position: absolute; right: 2px; top: 19px; border: 5px solid transparent; border-left: 7px solid #6b7385; border-right: 0; }
.sfrot-plus { align-self: flex-start; line-height: 48px; color: #6b7385; font-weight: 700; }
.sfrot-loop { align-self: flex-start; margin-top: 12px; padding: 4px 10px; border: 1px dashed #4a5263; border-radius: 99px; color: #9aa3b5;
  font: 600 0.72rem/1 var(--tg-head); letter-spacing: 0.12em; text-transform: uppercase; }
.sfrot-or { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.sfrot-orl { font: 700 0.65rem/1 var(--tg-head); letter-spacing: 0.14em; text-transform: uppercase; color: #687083; margin-bottom: 3px; }
.sfrot-alt { width: auto; }
.sfrot-alt .sfrot-ic { width: 34px; height: 34px; border-width: 1px; }
.sfrot-alt .sfrot-cap b { font-size: 0.74rem; }
/* priority: a ranked list, one row each */
.sfrot-priority .sfrot-strip { flex-direction: column; gap: 6px; counter-reset: none; }
.sfrot-priority .sfrot-strip > li { width: 100%; }
.sfrot-priority .sfrot-step { flex-direction: row; align-items: center; width: 100%; gap: 10px; text-align: left; padding: 6px 8px;
  border-radius: 9px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.05); }
.sfrot-priority .sfrot-ic { width: 40px; height: 40px; flex: none; }
.sfrot-priority .sfrot-cap { margin: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.sfrot-priority .sfrot-cap b { font-size: 0.95rem; }
.sfrot-priority .sfrot-when { font-size: 0.86rem; }
.sfrot-priority .sfrot-or { flex-direction: row; gap: 6px; margin: 0 0 0 auto; }
.sfrot-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #1b1f29; color: var(--tg-gold);
  font: 800 0.8rem/1 var(--tg-head); border: 1px solid #3a3f4c; }
.sfrot-priority li:first-child .sfrot-n { background: var(--tg-gold); color: #000; border-color: var(--tg-gold); }
.sfrot-notes { margin: 12px 0 0; padding-left: 18px; color: #c9ccd4; font-size: 0.92rem; }
@media (max-width: 560px) {
  .sfrot { padding: 12px; }
  .sfrot-step { width: 76px; }
  .sfrot-ic { width: 44px; height: 44px; }
  .sfrot-arrow { width: 14px; }
  .sfrot-arrow::before { right: 5px; }
  .sfrot-cap b { font-size: 0.78rem; }
  .sfrot-priority .sfrot-step { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sftal-t.is-new::before, .sftal-t.is-new .sftal-ic, .sftal-t.is-flash .sftal-ic, .sftal[aria-busy="true"] { animation: none; }
}

/* ================================================================== /talents planner page ========== */
.tp-h p { max-width: 74ch; }
.tp-top { padding: 14px 16px; }
.tp-classes { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.tp-cls { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 7px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); color: #c7ccd7; font: 600 0.84rem/1 var(--tg-head, sans-serif);
  letter-spacing: 0.05em; text-transform: uppercase; transition: border-color 0.15s, background 0.15s, transform 0.12s; }
.tp-cls img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  filter: grayscale(0.55) brightness(0.8); transition: filter 0.15s, box-shadow 0.15s; }
.tp-cls:hover { border-color: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
.tp-cls:hover img { filter: none; }
.tp-cls[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.tp-cls[aria-pressed="true"] img { filter: none; box-shadow: 0 0 0 2px var(--c), 0 0 14px color-mix(in srgb, var(--c) 50%, transparent); }
.tp-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 12px; }
.tp-sp { flex: 1; }
.tp-check { display: inline-flex; align-items: center; gap: 8px; color: #c7ccd7; font-size: 0.9rem; cursor: pointer; user-select: none; }
.tp-check input { width: 17px; height: 17px; accent-color: #f5b14c; }
.tp-check.is-off { opacity: 0.45; cursor: default; }
.tp-status { margin: 8px 0 0; min-height: 1.3em; color: #4cc38a; font-size: 0.9rem; }
.tp-status.bad { color: #ff8a8d; }
.tp-board { margin-top: 14px; padding: 16px; }
.tp-tree { max-width: 1060px; margin: 0 auto; }
.tp-lower { align-items: start; }
.tp-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tp-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02); }
.tp-item.is-other { opacity: 0.62; }
.tp-cicon { border-radius: 50%; border: 1px solid #000; flex: none; }
.tp-iinfo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tp-iinfo b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-imeta { color: #9aa3b5; font-size: 0.82rem; }
.tp-inote { color: #c9ccd4; font-size: 0.82rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-gh { margin: 12px 0 6px; font: 700 0.78rem/1 var(--tg-head, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: #9aa3b5; }
.tp-gh:first-child { margin-top: 0; }
.tp-chg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
.tp-chgc h3 { margin: 0 0 8px; font: 700 0.85rem/1.2 var(--tg-head, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; }
.tp-chgc.is-new h3 { color: #4cc38a; } .tp-chgc.is-chg h3 { color: #f5b14c; } .tp-chgc.is-gone h3 { color: #9aa3b5; }
.tp-chgc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-height: 360px; overflow: auto; }
.tp-chgc li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; align-items: center; font-size: 0.9rem; }
.tp-chgc li img { grid-row: span 2; border-radius: 3px; border: 1px solid #000; }
.tp-chgc li b { font-weight: 600; grid-column: 2; }
.tp-chgc li small { grid-column: 2; color: #9aa3b5; font-size: 0.78rem; }
.tp-chgc li:not(:has(img)) b, .tp-chgc li:not(:has(img)) small { grid-column: 1 / -1; }
.tp-chgnote { margin-top: 12px; }
.tp-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px;
  background: #0e1117; color: #eef0f4; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); }
.tp-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.tp-form { display: grid; gap: 12px; padding: 18px; }
.tp-form h3 { margin: 0; font: 800 1.3rem/1.1 var(--tg-head, sans-serif); letter-spacing: 0.02em; text-transform: uppercase; }
.tp-form label { display: grid; gap: 5px; font-weight: 600; font-size: 0.9rem; }
.tp-form input, .tp-form select, .tp-form textarea { padding: 9px 11px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: #090b0f; color: #eef0f4; font: inherit; font-weight: 400; }
.tp-ferr { margin: 0; color: #ff8a8d; min-height: 1.2em; font-size: 0.88rem; }
/* In game (docs/INGAME_TALENTS.md): the planner's In game controls and the character page's Talents card */
.tp-item.is-ingame { border-color: rgba(245, 177, 76, 0.45); background: rgba(245, 177, 76, 0.06); }
.tp-igsel { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: #c7ccd7; font-size: 0.82rem; }
.tp-igsel select { padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.14); background: #090b0f; color: #eef0f4; font: inherit; }
.tp-ig small { font-weight: 400; color: #9aa3b5; font-size: 0.8rem; }
.tp-send { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.tp-ghint { margin-top: 10px; }
.ct-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ct-pair.one { grid-template-columns: minmax(0, 1fr); }
.ct-tree, .ct-empty { min-width: 0; }
.ct-notes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.92rem; }
.ct-notes .good { color: #4cc38a; } .ct-notes .bad { color: #ff8a8d; } .ct-notes .dim { color: #9aa3b5; }
.ct-notes svg { width: 16px; height: 16px; vertical-align: -3px; }
.ct-next { display: flex; align-items: center; gap: 8px; }
.ct-next img { border-radius: 3px; border: 1px solid #000; }
.ct-send { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
#talents .btns { margin-top: 12px; }
@media (max-width: 1000px) { .ct-pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) {
  .tp-classes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tp-classes { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 2px; scroll-padding: 0 12px; scroll-snap-type: x proximity; }
  .tp-classes::-webkit-scrollbar { display: none; }
  .tp-cls { flex: none; width: 74px; scroll-snap-align: start; }
  .tp-board { padding: 12px 10px; }
  .tp-chg { grid-template-columns: minmax(0, 1fr); }
  .tp-ctl .btn { flex: 1; }
  .tp-sp { display: none; }
}
.tp-how-m { display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 760px) { .tp-how-d { display: none; } .tp-how-m { display: inline; } }
@media (max-width: 760px) {
  .tp-top { padding: 10px 12px; }
  .tp-cls { width: 62px; padding: 6px 2px 5px; font-size: 0.68rem; gap: 4px; }
  .tp-cls img { width: 28px; height: 28px; }
  .tp-ctl { gap: 8px; margin-top: 10px; }
  .tp-game { order: 1; }
  .tp-check { order: 3; flex-basis: 100%; font-size: 0.86rem; }
  .tp-ctl .btn { order: 2; flex: 1 1 0; padding: 7px 6px; font-size: 0.8rem; }
  .tp-ctl .btn svg { width: 14px; height: 14px; }
  .tp-game { flex-basis: 100%; display: flex; }
  .tp-game button { flex: 1; }
  .tp-status:empty { display: none; }
  .sftal-head { flex-wrap: nowrap; align-items: flex-start; }
  .sftal-title { flex-direction: column; gap: 4px; }
  .sftal-cls { font-size: 1.3rem; }
  .sftal-split { font-size: 1.05rem; }
  .sftal-pts > span { min-width: 54px; padding: 3px 8px 4px; }
  .sftal-pts small { font-size: 0.56rem; letter-spacing: 0.1em; }
  .sftal-pts b { font-size: 1.2rem; }
  .sftal-ptab { font-size: 0.8rem; padding: 6px; }
}
.tp-ilink { font-weight: 600; color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-ilink:hover { text-decoration: underline; }
.tp-board + .tp-board { margin-top: 14px; }
.tp-board .sfrot { margin: 0; border: 0; padding: 0; background: none; }
/* Synced with the game (SF-Stats, Talented Forever, zTalentPlanner): the Downloads feature boxes (.dl-feat, app.css) */
.tp-sync .tp-sync-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tp-sync .fi img { width: 22px; height: 22px; border-radius: 4px; display: block; }
.tp-sync-how { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin-top: 12px; }
.tp-sync-how p { margin: 0; flex: 1 1 320px; }
.tp-syncwrap[hidden] { display: none; }
.tp-teaser { display: flex; align-items: center; gap: 8px; margin: 14px 2px 0; color: #c7ccd7; font-size: 0.92rem; }
.tp-teaser svg { width: 16px; height: 16px; color: #f5b14c; flex: none; }
.tp-teaser a { font-weight: 600; }
/* "Members see more" is the site's one locked card (src/locked.js, styled in app/app.css as aside.sf-locked); this
   file never styles .sf-locked*: it loads on guide pages too, and a rule here would change the card everywhere. */
/* build rows: spec icon with the class icon on its corner, title + role badge, buttons */
.tp-icons { position: relative; flex: none; width: 38px; height: 38px; }
.tp-icons .tp-spec { width: 34px; height: 34px; border-radius: 6px; border: 1px solid #000; box-shadow: 0 0 0 1px rgba(245, 177, 76, 0.35); }
.tp-icons .tp-cls-badge { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #000; background: #000; }
.tp-ititle { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.tp-ititle > b { font-weight: 600; }
.tp-ititle .badge { font-size: 0.66rem; padding: 2px 6px; letter-spacing: 0.08em; }
.badge.tp-role.tank { --bc: #6aa8ff; } .badge.tp-role.heal { --bc: #4cc38a; } .badge.tp-role.dps { --bc: #ff8a8d; }
.tp-ibtns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.tp-author { color: var(--c, #fff); font-weight: 700; }
.tp-by { margin-top: 1px; }
.tp-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.tp-guild-sub { margin: -4px 0 10px; }
.tp-sort button { padding: 5px 10px; font-size: 0.78rem; }
.tp-gitem.is-pick { border-color: rgba(245, 177, 76, 0.5); background: rgba(245, 177, 76, 0.06); }
.tp-gitem.is-removed { opacity: 0.6; }
.tp-gitem.is-pending { border-style: dashed; }
.tp-votes { display: inline-flex; gap: 4px; }
.tp-vote { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0b0d12; color: #c7ccd7; font: 600 0.82rem/1 inherit; cursor: pointer; min-height: 30px; }
.tp-vote span { font-size: 0.7rem; }
.tp-vote:hover:not(:disabled) { border-color: rgba(245, 177, 76, 0.5); color: #fff; }
.tp-vote.up[aria-pressed="true"] { border-color: #4cc38a; color: #4cc38a; background: rgba(76, 195, 138, 0.1); }
.tp-vote.down[aria-pressed="true"] { border-color: #ff8a8d; color: #ff8a8d; background: rgba(255, 138, 141, 0.1); }
.tp-vote:disabled { cursor: default; opacity: 0.7; }
.tp-sharedb { align-self: flex-start; margin-top: 4px; text-decoration: none; font-size: 0.66rem; padding: 2px 6px; }
.tp-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* the build page header */
.tp-bh { display: flex; gap: 14px; align-items: center; min-width: 0; }
.tp-bh > .tp-spec { width: 52px; height: 52px; border-radius: 9px; border: 1px solid #000; box-shadow: 0 0 0 1px rgba(245, 177, 76, 0.45); flex: none; }
.tp-bmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-bmeta .tp-cicon { width: 20px; height: 20px; }
/* /officer/builds */
.tp-orow { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08)); }
.tp-orow:first-of-type { border-top: 0; }
.tp-orow .tp-spec { border-radius: 5px; border: 1px solid #000; flex: none; }
.tp-orow .btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tp-orow form { margin: 0; }
/* Your builds is the narrow column: buttons go under the build */
.tp-saved .tp-item, .tp-gitem { flex-wrap: wrap; }
.tp-saved .tp-item .tp-iinfo, .tp-gitem .tp-iinfo { flex: 1 1 calc(100% - 52px); }
.tp-saved .tp-item .tp-ibtns { flex: 1 1 100%; justify-content: flex-start; padding-left: 36px; }
.tp-gitem .tp-ibtns { flex: 1 1 100%; justify-content: flex-start; padding-left: 48px; }
.tp-gitem .tp-inote { white-space: normal; }
@media (max-width: 900px) { .tp-sync .tp-sync-feats { grid-template-columns: minmax(0, 1fr); } .tp-sync .card-h .aside { display: none; } }
@media (max-width: 760px) {
  .tp-item { flex-wrap: wrap; }
  .tp-item .tp-iinfo { flex: 1 1 calc(100% - 52px); }
  .tp-item .tp-ibtns { flex: 1 1 100%; justify-content: flex-start; padding-left: 48px; }
  .tp-fgrid { grid-template-columns: minmax(0, 1fr); }
  .tp-orow { flex-wrap: wrap; }
  .tp-orow .btns { flex-basis: 100%; justify-content: flex-start; }
}