.fr-main { display: grid; align-content: start; gap: .4rem; min-width: 0; }
.fr-head { display: flex; align-items: center; gap: .45rem; margin: .5rem 0 .05rem; font: 400 .74rem/1.2 var(--font-ui); letter-spacing: .12em; color: var(--gold-3); }
.fr-head:first-child { margin-top: 0; }
.fr-head b { font: 400 .8rem var(--font-num); color: var(--text-3); letter-spacing: 0; }
.fr-row, .fr-request { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; min-width: 0; padding: .6rem .7rem; border-radius: .75rem; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .035); }
.fr-request { grid-template-columns: auto minmax(0, 1fr) auto; border-color: rgba(242, 198, 106, .22); background: rgba(242, 198, 106, .05); }
.fr-request.is-outgoing, .fr-request.is-ignored { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
.fr-row.is-online { border-color: color-mix(in srgb, var(--skill) 24%, rgba(255, 255, 255, .06)); }
.fr-row.is-offline { opacity: .82; }
.fr-mark { position: relative; flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--skill, #3b5577) 30%, #16233a), #0b121e 72%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.fr-mark .ia-emblem { width: 1.7rem; height: 1.7rem; }
.fr-row.is-offline .fr-mark .ia-emblem { filter: grayscale(1) brightness(.7); }
.fr-dot { position: absolute; right: -.08rem; bottom: -.02rem; width: .72rem; height: .72rem; border-radius: 50%; background: #5d5f68; box-shadow: 0 0 0 2px #0b111c; }
.fr-row.is-online .fr-dot { background: var(--online); }
.fr-copy { display: grid; gap: .12rem; min-width: 0; }
.fr-name { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; min-width: 0; white-space: nowrap; }
.fr-name .chat-name { flex: 0 1 auto; min-width: min(100%, 4.5rem); overflow: hidden; text-overflow: ellipsis; padding: 0; border: 0; background: none; font: 600 1rem/1.25 var(--font-ui); color: var(--text-1); cursor: pointer; }
.fr-name .chat-name::after { content: none; }
.fr-name .chat-name:hover { color: var(--gold-0); }
.fr-name small { font: 400 .9rem var(--font-num); color: var(--text-3); }
.fr-name .epithet { font-size: .98rem; }
.fr-name .clan-name-badge { font-size: .56rem; }
.fr-doing { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .9rem; line-height: 1.35; color: var(--text-2); }
.fr-request .fr-doing { white-space: normal; }
.fr-where { color: var(--text-3); }
.fr-doing.is-off { color: var(--quiet); }
.fr-total { display: grid; justify-items: end; gap: .08rem; font: 400 1rem/1 var(--font-num); color: var(--text-2); }
.fr-total small { font: 400 .62rem var(--font-ui); letter-spacing: .12em; color: var(--gold-3); }
.fr-acts, .fr-request-acts { display: flex; align-items: center; gap: .35rem; }
:is(.fr-msg, .fr-more, .fr-accept, .fr-decline, .fr-cancel, .fr-add-btn) { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.35rem; min-width: 2.35rem; padding: 0 .8rem; border-radius: .6rem; border: 1px solid rgba(242, 198, 106, .4); background: rgba(242, 198, 106, .09); color: var(--gold-1); font: 600 .86rem var(--font-ui); cursor: pointer; transition: background .15s, border-color .15s; }
:is(.fr-msg, .fr-more, .fr-accept, .fr-decline) .ia-glyph { width: 1rem; height: 1rem; }
.fr-msg { border-color: color-mix(in srgb, var(--pm) 45%, transparent); background: color-mix(in srgb, var(--pm) 9%, transparent); color: var(--pm-strong); }
.fr-msg.is-quiet { opacity: .62; }
.fr-more { padding: 0; border-color: rgba(255, 255, 255, .1); background: none; color: var(--text-3); }
.fr-accept { border-color: color-mix(in srgb, var(--online) 55%, transparent); background: color-mix(in srgb, var(--online) 14%, transparent); color: #b8f5c9; }
.fr-decline { padding: 0; border-color: rgba(255, 93, 87, .4); background: rgba(255, 93, 87, .08); color: #ff9b95; }
.fr-cancel { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: var(--text-2); }
:is(.fr-msg, .fr-accept, .fr-decline, .fr-add-btn, .fr-more, .fr-cancel):hover:not(:disabled) { filter: brightness(1.18); }
.fr-add { display: flex; gap: .45rem; min-width: 0; }
.fr-add-field { flex: 1; display: flex; align-items: center; gap: .45rem; min-width: 0; min-height: 2.35rem; padding: 0 .7rem; border-radius: .6rem; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: var(--text-3); }
.fr-add-field .ia-glyph { width: .95rem; height: .95rem; }
.fr-add-field input { flex: 1; min-width: 0; min-height: 0; border: 0; background: none; outline: none; color: var(--text-1); font-size: .9rem; }
.fr-add-field input::placeholder { color: var(--quiet); }
.fr-add-field:focus-within { border-color: rgba(242, 198, 106, .5); }
.fr-add-btn { flex: none; background: linear-gradient(180deg, #f3d488, #d9a44c); border-color: #ffe3a0; color: #22160a; font-weight: 700; }
.fr-note { margin: .1rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--text-3); }
.fr-empty { margin: .8rem 0; font-size: .92rem; line-height: 1.5; color: var(--text-3); }
.fr-seg { display: flex; }
.fr-seg button { flex: 1; }
.fr-card { display: grid; gap: .6rem; padding: 1rem 1.05rem; border-radius: 1.05rem; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035); }
.fr-card h4 { display: flex; align-items: center; gap: .45rem; margin: 0; font: 400 .79rem var(--font-ui); letter-spacing: .12em; color: var(--gold-3); }
.fr-card h4 b { font: 400 .85rem var(--font-num); color: var(--text-2); letter-spacing: 0; }
.fr-request.is-compact { grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; padding: .45rem .5rem; }
.fr-request.is-compact .fr-mark { width: 2.1rem; height: 2.1rem; }
.fr-request.is-compact .fr-mark .ia-emblem { width: 1.4rem; height: 1.4rem; }
.fr-request.is-compact .fr-name .chat-name { font-size: .92rem; }
.fr-request.is-compact :is(.fr-accept, .fr-decline) { min-height: 2.1rem; min-width: 2.1rem; padding: 0; }

@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (pointer: fine), (min-width: 761px) and (pointer: none) {
  .is-hud .fr-body { grid-template-columns: minmax(0, 1fr) 24rem; }
  .is-hud .fr-main { min-height: 0; overflow-y: auto; padding-right: .3rem; will-change: scroll-position; }
  .is-hud .fr-side { display: grid; align-content: start; gap: .9rem; min-width: 0; min-height: 0; overflow-y: auto; }
  .is-hud .win-stats b span { font-size: .9rem; color: var(--text-3); }
  .is-hud .staff-page .st-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: .3rem; }
}

.st-list { display: grid; align-content: start; gap: .55rem; }
.st-early { display: grid; gap: .6rem; overflow-x: auto; }
.st-early table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.st-early th, .st-early td { padding: .3rem .55rem; text-align: right; white-space: nowrap; }
.st-early thead th { font-size: .8rem; font-weight: 600; color: var(--text-3); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.st-early thead th:first-child, .st-early tbody th { text-align: left; }
.st-early thead .st-src { text-align: center; color: var(--gold-1); border-left: 1px solid rgba(255, 255, 255, .12); }
.st-early tbody th { font-weight: 500; color: var(--text-1); }
.st-early tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
.st-early td { color: var(--text-1); }
.st-early td.is-zero { color: var(--quiet); }
.st-trails td small { margin-left: .3rem; font-size: .76rem; color: var(--text-3); }
.st-trails tbody tr:nth-child(5) th, .st-trails tbody tr:nth-child(8) th { padding-top: .5rem; }
.st-early-note { margin: 0; font-size: .82rem; color: var(--text-3); }
.st-timing th, .st-timing td { text-align: left; vertical-align: top; }
.st-timing td { white-space: normal; min-width: 9rem; }
.st-timing td small { display: block; margin-top: .1rem; font-size: .8rem; color: var(--text-3); }
.st-timing td .is-zero { color: var(--quiet); }
.st-timing tr.is-sign th, .st-timing tr.is-sign td:last-child b { color: #ffcfae; }
.st-card { display: grid; gap: .45rem; padding: .85rem 1rem; border-radius: .9rem; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035); }
.st-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; min-width: 0; }
.st-card-head strong .chat-name, .st-row .chat-name, .st-timing .chat-name { padding: 0; border: 0; background: none; font: 600 1rem var(--font-ui); color: var(--gold-0); cursor: pointer; }
.st-card-head strong .chat-name::after, .st-row .chat-name::after, .st-timing .chat-name::after { content: none; }
.st-reason { padding: .08rem .45rem; border-radius: .3rem; border: 1px solid rgba(255, 150, 120, .45); color: #ffb9a3; font: 700 .7rem/1.4 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.st-when { margin-left: auto; font: 400 .84rem var(--font-num); color: var(--quiet); }
.st-gone, .st-muted { font-size: .8rem; color: var(--text-3); }
.st-muted { color: #ffcfae; }
.st-by, .st-profile { margin: 0; font-size: .88rem; color: var(--text-3); }
.st-note { margin: 0; font-size: .92rem; color: var(--text-1); }
.st-lines { display: grid; gap: .2rem; margin: 0; padding: .5rem .7rem; border-radius: .6rem; background: rgba(0, 0, 0, .25); list-style: none; font-size: .9rem; }
.st-lines li { display: flex; flex-wrap: wrap; gap: 0 .45rem; color: var(--text-2); }
.st-lines li.is-reported { color: var(--text-1); }
.st-lines li.is-reported b { color: #ffb9a3; }
.st-lines time { font: 400 .8rem var(--font-num); color: var(--quiet); }
.st-lines b { color: var(--talk); }
.st-to { color: var(--text-3); }
.st-said { overflow-wrap: anywhere; }
.st-acts { display: flex; flex-wrap: wrap; gap: .45rem; }
.st-row { display: grid; grid-template-columns: 8rem 10rem minmax(0, 1fr); align-items: baseline; gap: .15rem .8rem; padding: .55rem .8rem; border-radius: .7rem; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .025); font-size: .9rem; }
.st-row time { font: 400 .84rem var(--font-num); color: var(--quiet); }
.st-row .st-where, .st-row .st-why { color: var(--text-3); }
.st-row .st-who { color: var(--text-2); }
.st-row .st-said { grid-column: 3; color: #aaa397; font-style: italic; }
.st-row .st-why { grid-column: 3; }
.st-row.is-audit { grid-template-columns: 8rem minmax(0, 1fr); }
.st-row.is-audit .st-why { grid-column: 2; }
.st-older { justify-self: start; margin-top: .7rem; }
.staff-page.is-phone .st-row, .staff-page.is-phone .st-row.is-audit { grid-template-columns: minmax(0, 1fr); }
.staff-page.is-phone .st-row > * { grid-column: auto !important; }

.report-dialog { width: min(30rem, calc(100vw - 2rem)); }
.report-dialog h2 { margin: 0 0 .4rem; font: 400 1.5rem var(--font-display); color: var(--gold-0); }
.report-what { margin: 0 0 .8rem; color: var(--text-2); font-size: .92rem; }
.report-form { display: grid; gap: .45rem; }
.report-form label { font-size: .84rem; color: var(--text-3); }
.report-form textarea { resize: vertical; min-height: 4.5rem; }
.report-buttons { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .5rem; }
.profile-mute .select { min-height: 2.1rem; padding: .2rem .5rem; }
.profile-muted { font-size: .86rem; color: #ffcfae; }

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .friends-page.is-phone, .staff-page.is-phone { gap: .8rem; padding: .3rem .1rem 1rem; }
  .fr-mhead { display: flex; align-items: center; gap: .7rem; }
  .fr-mhead .ia-emblem { width: 2.6rem; height: 2.6rem; }
  .fr-mhead h1 { margin: 0; font: 400 1.6rem/1.1 var(--font-display); color: var(--gold-0); }
  .fr-mhead small { font-size: .86rem; color: var(--text-3); }
  .friends-page.is-phone .fr-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .friends-page.is-phone :is(.fr-row, .fr-request, .fr-card) { background: linear-gradient(180deg, rgba(20, 31, 50, .96), rgba(10, 16, 28, .97)); }
  .friends-page.is-phone .fr-request:not(.is-outgoing):not(.is-ignored) { background: linear-gradient(180deg, rgba(40, 32, 18, .96), rgba(16, 14, 12, .97)); }
  .friends-page.is-phone .fr-add-field { background: rgba(10, 16, 28, .95); }
  .friends-page.is-phone .fr-msg { padding: 0; width: 3.3rem; min-height: 3.3rem; }
  .friends-page.is-phone .fr-request-acts { gap: .6rem; }
  .friends-page.is-phone .fr-request-acts :is(.fr-accept, .fr-decline, .fr-cancel) { min-height: 3.3rem; min-width: 3.3rem; }
  .friends-page.is-phone :is(.fr-add-field, .fr-add-btn) { min-height: 3.3rem; }
  .friends-page.is-phone .fr-seg button { min-height: 3.3rem; }
  .friends-page.is-phone .fr-copy { position: relative; }
  .friends-page.is-phone .fr-name .chat-name::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 3.3rem); translate: 0 -50%; }
  .friends-page.is-phone :is(.fr-head, .fr-head b, .fr-card h4, .fr-mhead small, .segmented button, .clan-name-badge, .pt-head, .pt-note, .fr-msg, .fr-more, .fr-accept, .fr-decline, .fr-cancel, .fr-add-btn) { font-size: .9rem; }
  .friends-page.is-phone .clan-name-badge .ia-emblem { width: 1rem; height: 1rem; }
}

.characters-dialog .ch-list { list-style: none; margin: .6rem 0 .8rem; padding: 0; display: grid; gap: .5rem; }
.characters-dialog .ch-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem .8rem; border-radius: .7rem; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); }
.characters-dialog .ch-row.is-now { border-color: rgba(242, 198, 106, .5); background: rgba(242, 198, 106, .08); }
.characters-dialog .ch-copy { display: grid; gap: .1rem; min-width: 0; }
.characters-dialog .ch-copy b { font: 400 1.1rem var(--font-display); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.characters-dialog .ch-copy small { color: var(--text-3); font-size: .85rem; }
.characters-dialog .ch-buttons { display: flex; align-items: center; gap: .4rem; flex: none; }
.characters-dialog .ch-row.is-going { border-color: rgba(224, 92, 80, .55); background: rgba(224, 92, 80, .08); }
.characters-dialog .ch-confirm { display: grid; gap: .6rem; margin: 0 0 .8rem; padding: .8rem; border-radius: .7rem; border: 1px solid rgba(224, 92, 80, .45); background: rgba(224, 92, 80, .07); }
.characters-dialog .ch-confirm p { margin: 0; color: var(--text-2); font-size: .9rem; }
.characters-dialog .ch-confirm .report-buttons { margin: 0; }
.characters-dialog .ch-now { font: 700 .72rem var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-1); }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .characters-dialog :is(.btn, .input) { min-height: 3.3rem; }
  .characters-dialog .btn { font-size: .9rem; }
  .characters-dialog :is(.ch-copy small, .ch-now) { font-size: .9rem; }
}