.sfoth-ladder h1 { margin-top: 0; }
.sfoth-notice { border: 1px solid currentColor; border-radius: 8px; padding: .6rem .9rem; }
.sfoth-windows { display: flex; gap: .5rem; margin: 1rem 0; }
.sfoth-windows a { padding: .35rem .9rem; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; }
.sfoth-windows a[aria-current="page"] { font-weight: 700; text-decoration: underline; }
.sfoth-muted { opacity: .75; }
.sfoth-empty { font-style: italic; }
.sfoth-table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.sfoth-table th, .sfoth-table td { border-bottom: 1px solid currentColor; padding: .35rem .6rem; text-align: left; }
.sfoth-card { border: 1px solid var(--line, currentColor); border-radius: 12px; padding: clamp(1rem, 3vw, 1.5rem); margin: 1rem 0; background: var(--panel, transparent); }
.member-profile-sfoth .sfoth-card { border: 0; border-radius: 0; margin: 0; padding: 16px 22px 22px; background: transparent; }
.sfoth-card-heading { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; }
.sfoth-card-heading h4 { margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .7rem; align-items: baseline; }
.sfoth-level { font-weight: 800; }
.sfoth-rating { font-weight: 400; font-size: .85em; }
.sfoth-ranks { list-style: none; display: flex; gap: .5rem; margin: 0; padding: 0; }
.sfoth-ranks li { display: flex; flex-direction: column; min-width: 4.5rem; padding: .45rem .6rem; border: 1px solid var(--line, currentColor); border-radius: 6px; text-align: center; }
.sfoth-ranks li span, .sfoth-rank-note, .sfoth-overview span, .sfoth-overview small, .sfoth-signature span, .sfoth-rivalry span { color: var(--muted, inherit); font-size: .75rem; }
.sfoth-rank-note { margin: .55rem 0 1rem; }
.sfoth-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.sfoth-overview > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: .8rem; background: var(--panel-2, transparent); border: 1px solid var(--line, currentColor); border-radius: 7px; }
.sfoth-overview strong { font-size: clamp(1.2rem, 2.5vw, 1.6rem); line-height: 1.2; overflow-wrap: anywhere; }
.sfoth-overview > .sfoth-streak { position: relative; isolation: isolate; }
.sfoth-streak-number { position: relative; display: block; width: max-content; max-width: 100%; font-variant-numeric: tabular-nums; }
.sfoth-streak .sfoth-streak-value { display: inline-block; position: relative; z-index: 1; color: inherit; font-size: inherit; }
.sfoth-overview > .sfoth-streak:not(.sfoth-streak--0) { border-color: var(--streak-border); background: radial-gradient(circle at 30% 55%, var(--streak-wash), transparent 72%), var(--panel-2, transparent); }
.sfoth-streak:not(.sfoth-streak--0) .sfoth-streak-number { color: var(--streak-color); font-size: calc(1.6rem + var(--sfoth-streak-progress) * .85rem); text-shadow: 0 0 calc(.3rem + var(--sfoth-streak-progress) * .7rem) var(--streak-color); }
.sfoth-streak--1 { --streak-color: #31dbf7; --streak-border: #338597; --streak-wash: rgba(49, 219, 247, .11); }
.sfoth-streak--2 { --streak-color: #b98aff; --streak-border: #7654a9; --streak-wash: rgba(185, 138, 255, .15); }
.sfoth-streak--3 { --streak-color: #ff6acb; --streak-border: #b4518d; --streak-wash: rgba(255, 106, 203, .19); }
.sfoth-streak--4 { --streak-color: #ff9c48; --streak-border: #ae6134; --streak-wash: rgba(255, 156, 72, .23); }
.sfoth-streak--5 { --streak-color: #ff5961; --streak-border: #bb4149; --streak-wash: rgba(255, 89, 97, .27); }
.sfoth-streak--6 { --streak-color: #ff5bce; --streak-border: #b94e98; --streak-wash: rgba(255, 91, 206, .31); }
.sfoth-streak--2 .sfoth-streak-value { animation: sfoth-streak-breathe calc(2.7s - var(--sfoth-streak-progress) * .5s) ease-in-out infinite; }
.sfoth-streak--3 .sfoth-streak-value { animation: sfoth-streak-bounce calc(2.2s - var(--sfoth-streak-progress) * .6s) ease-in-out infinite; }
.sfoth-streak--4 .sfoth-streak-value { animation: sfoth-streak-jolt calc(1.9s - var(--sfoth-streak-progress) * .6s) ease-in-out infinite; }
.sfoth-streak--5 .sfoth-streak-value { animation: sfoth-streak-jolt calc(1.6s - var(--sfoth-streak-progress) * .5s) ease-in-out infinite; }
.sfoth-streak--6 .sfoth-streak-value { animation: sfoth-streak-jolt .85s ease-in-out infinite, sfoth-streak-spectrum 3.5s linear infinite; }
.sfoth-streak .sfoth-streak-sparks { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; color: var(--streak-color); }
.sfoth-streak--3 .sfoth-streak-sparks, .sfoth-streak--4 .sfoth-streak-sparks, .sfoth-streak--5 .sfoth-streak-sparks, .sfoth-streak--6 .sfoth-streak-sparks { display: block; }
.sfoth-streak--6 .sfoth-streak-sparks { animation: sfoth-streak-spectrum 3.5s linear infinite; }
.sfoth-streak .sfoth-streak-sparks > span { position: absolute; left: 55%; top: 50%; width: calc(.24rem + var(--sfoth-streak-progress) * .17rem); height: calc(.24rem + var(--sfoth-streak-progress) * .17rem); color: var(--streak-color); background: currentColor; box-shadow: 0 0 .35rem currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: sfoth-streak-spark calc(2.3s - var(--sfoth-streak-progress) * .85s) ease-out infinite; animation-delay: var(--spark-delay); }
.sfoth-streak-sparks > span:nth-child(1) { --spark-x: -23px; --spark-y: -23px; --spark-delay: 0s; }
.sfoth-streak-sparks > span:nth-child(2) { --spark-x: 32px; --spark-y: -18px; --spark-delay: -.8s; }
.sfoth-streak-sparks > span:nth-child(3) { --spark-x: -19px; --spark-y: 19px; --spark-delay: -1.3s; }
.sfoth-streak-sparks > span:nth-child(4) { --spark-x: 37px; --spark-y: 13px; --spark-delay: -.4s; }
.sfoth-streak-sparks > span:nth-child(5) { --spark-x: 5px; --spark-y: -31px; --spark-delay: -1.8s; }
.sfoth-streak-sparks > span:nth-child(6) { --spark-x: 17px; --spark-y: 27px; --spark-delay: -1s; }
.sfoth-streak--3 .sfoth-streak-sparks > span:nth-child(n+3), .sfoth-streak--4 .sfoth-streak-sparks > span:nth-child(n+5) { display: none; }
@keyframes sfoth-streak-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes sfoth-streak-bounce { 0%, 72%, 100% { transform: translateY(0) scale(1); } 81% { transform: translateY(-3px) scale(1.055); } 90% { transform: translateY(1px) scale(.985); } }
@keyframes sfoth-streak-jolt { 0%, 67%, 100% { transform: translate(0, 0) scale(1); } 73% { transform: translate(-1px, -2px) scale(1.06); } 79% { transform: translate(1px, 0) scale(1.03); } 86% { transform: translate(-1px, 1px) scale(1.05); } 93% { transform: translate(1px, -1px) scale(1.02); } }
@keyframes sfoth-streak-spectrum { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes sfoth-streak-spark { 0%, 12% { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(0deg); } 23% { opacity: 1; } 70%, 100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(.2) rotate(120deg); } }
.sfoth-tracking-note { margin: .5rem 0 1rem; color: var(--muted, inherit); font-size: .72rem; }
.sfoth-context { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 1rem 0; }
.sfoth-context p { margin: 0; font-size: .85rem; }
.sfoth-context strong { margin-right: .25rem; }
.sfoth-context span { color: var(--muted, inherit); }
.sfoth-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.sfoth-detail-grid h5, .sfoth-recent h5 { margin: .65rem 0 .2rem; }
.sfoth-detail-grid h5, .sfoth-recent h5 { font-size: .95rem; }
.sfoth-detail-grid .sfoth-table { margin: .3rem 0 1rem; font-size: .85rem; }
.sfoth-detail-grid .sfoth-table th:last-child, .sfoth-detail-grid .sfoth-table td:last-child { text-align: right; }
.sfoth-signature { display: flex; flex-direction: column; gap: .1rem; margin: .5rem 0; }
.sfoth-signature strong { font-size: 1.1rem; }
.sfoth-weapon-best { margin: .3rem 0 .6rem; font-size: .85rem; }
.sfoth-recent { margin-top: .5rem; }
.sfoth-recent small { color: var(--muted, inherit); font-size: .75rem; font-weight: 400; }
.sfoth-form { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; padding: 0; }
.sfoth-form li { display: flex; flex-direction: column; min-width: 3.5rem; padding: .35rem .45rem; border: 1px solid var(--line, currentColor); border-radius: 6px; text-align: center; font-size: .72rem; }
.sfoth-form li strong { font-size: 1rem; }
.sfoth-rivalry { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line, currentColor); font-size: .85rem; }
.sfoth-rivalry span { display: block; }
@media (max-width: 640px) { .member-profile-sfoth .sfoth-card { padding: 16px 17px 17px; } .sfoth-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sfoth-detail-grid { grid-template-columns: 1fr; } .sfoth-ranks { width: 100%; } .sfoth-ranks li { flex: 1; min-width: 0; } }