.social-header-button { position: relative; gap: 7px; white-space: nowrap; }
.social-header-button svg { width: 20px; height: 20px; }
.social-badge { min-width: 18px; padding: 2px 5px; background: #dda16c; color: #221b15; border-radius: 9px; font-size: 10px; font-weight: 700; text-align: center; }
.scoreboard { top: 22px; right: 22px; width: 340px; padding: 12px; max-height: min(530px, calc(100% - 270px)); pointer-events: auto; background: #11181deb; border-color: #dbbb8f2b; }
.scoreboard .list-heading { margin-bottom: 8px; font-size: 10px; }
#scoreboard-button { width: 100%; flex: 0 0 auto; margin-top: 7px; padding: 4px; font-size: 11px; }
#scoreboard-players { min-height: 48px; }
.player-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; font-variant-numeric: tabular-nums; }
.player-table thead th { position: sticky; top: 0; z-index: 1; background: #171f25; color: #b9b9ad; padding: 8px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid #a58c6240; }
.player-table thead th:first-child { width: auto; }
.player-table thead th:nth-child(2), .player-table thead th:nth-child(3) { width: 37px; text-align: right; }
.player-table thead th:nth-child(4) { width: 76px; text-align: right; }
.player-table thead th:last-child { width: 30px; }
.player-table .player-actions-heading { font-size: 0; }
.player-row th, .player-row td { padding: 7px 4px; height: 43px; border-bottom: 1px solid #ffffff0c; vertical-align: middle; }
.scoreboard .player-row th, .scoreboard .player-row td { padding-top: 3px; padding-bottom: 3px; height: 35px; }
.player-cell { min-width: 0; font-weight: 500; border-left: 2px solid var(--player-color, #ab9a85); }
.player-identity { display: block; min-width: 0; }
.player-full-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dfddd5; font-size: 12px; line-height: 1.4; }
.player-markers { display: block; min-height: 11px; font-size: 8px; line-height: 1.4; letter-spacing: .02em; color: #a5b7af; }
.player-stat { color: #e3bc87; text-align: right; font-size: 12px; }
.player-ping { color: #bdc7cb; text-align: right; font-size: 10px; overflow-wrap: anywhere; }
.player-row.is-self { background: #c9a16d0c; }
.player-row.is-self .player-full-name { color: #fff0d6; }
.player-row.is-out .player-full-name { color: #a4a4a1; }
.player-row.is-out .player-markers { color: #b9aaa2; }
.player-row.is-watched { background: #cda7711c; }
.player-menu-button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 28px; min-width: 26px; border: 1px solid #ffffff20; border-radius: 4px; padding: 0 0 6px; background: #ffffff03; color: #d4baa0; font-size: 17px; font-weight: 700; letter-spacing: 1px; }
.player-menu-button:hover { background: #bda07424; border-color: #c5aa7360; }
.lobby-panel { display: flex; flex-direction: column; max-height: 100%; min-height: 0; }
.lobby-panel > .panel-heading, .lobby-panel > .panel-footer { flex-shrink: 0; }
.lobby-grid { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.lobby-roster { max-height: clamp(130px, calc(100dvh - 680px), 260px); overflow: auto; }
.lobby-roster .player-table thead th:nth-child(4) { width: 92px; }
.lobby-roster .player-full-name { font-size: 13px; }
.social-dialog { max-height: calc(100dvh - 24px); width: min(560px, calc(100vw - 24px)); }
.social-dialog .social-panel { padding: 23px; border-color: #ccb3864d; }
.social-dialog h2 { font-size: 27px; margin: 0; }
.social-dialog .panel-heading { align-items: center; margin-bottom: 17px; }
.social-dialog p { line-height: 1.6; overflow-wrap: anywhere; }
.social-dialog input:not([type="checkbox"]), .social-dialog textarea { width: 100%; border: 1px solid #8c9a9866; border-radius: 4px; padding: 10px; background: #11191e; color: var(--text); font: inherit; }
.social-dialog textarea { resize: vertical; margin: 10px 0 16px; }
.social-dialog textarea:focus-visible, .chat-composer textarea:focus-visible, .social-dialog [tabindex]:focus-visible, #scoreboard-players:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.social-dialog label { display: block; font-size: 12px; }
.social-dialog .check-setting { display: flex; }
.social-dialog .social-status { min-height: 20px; color: #d7b899; }
.social-dialog .small { font-size: 12px; }
.expanded-scoreboard { width: min(900px, calc(100vw - 24px)); }
.expanded-scoreboard .social-panel { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); overflow: hidden; }
.expanded-scoreboard .panel-heading, .expanded-scoreboard .social-panel > p { flex-shrink: 0; }
.expanded-players { max-height: min(650px, calc(100dvh - 230px)); overflow: auto; scrollbar-color: #796b58 #151a1e; }
.expanded-scoreboard .player-full-name { font-size: 15px; }
.expanded-scoreboard .player-markers { font-size: 10px; }
.expanded-scoreboard .player-row th, .expanded-scoreboard .player-row td { padding: 9px 8px; }
.expanded-scoreboard .player-table thead th { font-size: 11px; }
.expanded-scoreboard .player-table thead th:nth-child(2), .expanded-scoreboard .player-table thead th:nth-child(3) { width: 62px; }
.expanded-scoreboard .player-table thead th:nth-child(4) { width: 110px; }
.expanded-scoreboard .player-table thead th:nth-child(5) { width: 78px; }
.expanded-scoreboard .player-table thead th:last-child { width: 52px; }
.expanded-scoreboard .player-stat { font-size: 15px; }
.expanded-scoreboard .player-ping { font-size: 12px; }
.expanded-scoreboard .player-menu-button { height: 34px; width: 34px; }
.expanded-scoreboard .player-quick-mute button { min-height: 32px; padding: 4px; font-size: 12px; }
.social-drawer { position: fixed; margin: 12px 12px 12px auto; height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); width: min(440px, calc(100vw - 24px)); }
.social-drawer .social-panel { min-height: 100%; }
.social-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 20px 0 14px; }
.social-tabs button { font-size: 12px; padding: 9px 3px; border: 1px solid var(--line); border-radius: 4px; }
.social-tabs button[aria-selected="true"] { background: #b48b5f21; border-color: #c3a37372; color: #f4cd9c; }
.social-add-form { display: flex; gap: 8px; margin: 14px 0; }
.social-add-form input { min-width: 0; }
.social-add-form button { flex-shrink: 0; padding: 10px; }
.social-friend-code { user-select: all; color: #dbc398; }
.social-list { min-height: 90px; outline-offset: 3px; }
.social-card { padding: 14px 0; border-bottom: 1px solid var(--line); }
.social-card > strong { font-size: 14px; overflow-wrap: anywhere; }
.social-card p { margin: 7px 0; }
.social-card-actions { display: flex; flex-wrap: wrap; gap: 6px 15px; align-items: center; }
.social-card-actions .text-button { font-size: 12px; min-height: 32px; }
.player-menu { position: fixed; inset: auto; margin: 0; width: min(310px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); }
.player-menu .social-panel { padding: 18px; }
.player-menu h2 { font-size: 23px; }
.player-menu .panel-heading { gap: 10px; margin-bottom: 8px; }
.player-menu-actions { display: grid; gap: 5px; }
.player-menu-actions > button { width: 100%; justify-content: flex-start; min-height: 36px; padding: 7px 10px; background: #ffffff03; border: 1px solid #ffffff12; border-radius: 4px; text-align: left; }
.player-menu-actions > button:hover { background: #bd9e7b13; }
.result-name { position: relative; padding-right: 33px !important; }
.result-name .player-identity, .result-name .player-full-name { display: inline; white-space: normal; }
.result-name .player-markers { display: inline; margin-left: 8px; min-height: 0; }
.result-name .player-menu-button { position: absolute; right: 3px; top: 4px; }
.result-ping { display: inline; margin-left: 8px; color: #a8b4b9; font-size: 9px; font-weight: 400; }
.spectator-controls { display: flex; justify-content: center; gap: 20px; margin-top: 7px; pointer-events: auto; }
.spectator-controls .text-button { min-height: 29px; font-size: 11px; letter-spacing: 0; }
.spectator-note { bottom: calc(var(--dock-height, 165px) + 26px); max-width: 420px; }
.kill-feed { right: 220px; bottom: calc(var(--dock-height, 160px) + 24px); max-width: 330px; }
.room-chat { position: absolute; left: 20px; bottom: calc(var(--dock-height, 165px) + 26px); width: min(350px, calc(100% - 40px)); z-index: 7; pointer-events: none; --chat-font-size: 14px; --chat-opacity: .75; }
.app:not([data-view="game"]) .room-chat, .room-chat[data-phase="finished"], .room-chat[data-phase="intermission"] { bottom: 14px; }
.chat-recent { display: flex; flex-direction: column; gap: 4px; max-height: 230px; overflow: hidden; }
.chat-message { font-size: var(--chat-font-size); line-height: 1.42; padding: 6px 9px; border-radius: 3px; background: rgb(12 18 22 / var(--chat-opacity)); overflow-wrap: anywhere; transition: opacity .8s linear; }
.chat-message .chat-sender { color: #dcb78b; font-size: .85em; font-weight: 600; margin-right: 6px; }
.chat-message .chat-text { color: #e2e5df; white-space: pre-wrap; }
.chat-message.is-system .chat-sender { color: #86ccbb; letter-spacing: .04em; }
.chat-message.is-system .chat-text { color: #bbc7bd; }
.chat-message.is-removed .chat-text { color: #a6a49e; font-style: italic; }
#chat-open { pointer-events: auto; font-size: 11px; min-height: 31px; padding: 6px 11px; margin-top: 6px; border: 1px solid #ffffff28; border-radius: 4px; color: #dfc9aa; background: #10191bdb; }
.room-chat.is-open { width: min(470px, calc(100% - 40px)); }
.chat-panel { pointer-events: auto; background: rgb(15 22 27 / max(.88, var(--chat-opacity))); padding: 12px; border: 1px solid #c3a0747d; border-radius: 7px; box-shadow: 0 12px 50px #0006; max-height: min(680px, calc(100dvh - 140px)); overflow-y: auto; }
.chat-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 10px; }
.chat-heading strong { color: #e5c394; font-size: 13px; }
.chat-heading .text-button { font-size: 11px; }
.chat-history { max-height: min(280px, 32dvh); min-height: 80px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #796b58 #151a1e; padding: 3px; }
.chat-history .chat-message { margin-bottom: 7px; }
.chat-history .chat-message .chat-sender { display: block; }
.chat-time { font-size: 10px; color: #9fa8a5; margin-right: 12px; }
.chat-history .chat-message button { font-size: 10px; padding: 4px; color: #b6b7b2; }
.chat-status, .chat-feedback { font-size: 11px; line-height: 1.5; margin: 9px 0; overflow-wrap: anywhere; color: #bcb9af; }
.chat-feedback { color: #f0ba99; }
.chat-feedback:empty { display: none; }
.chat-mute { border: 1px solid #c486655e; padding: 9px; border-radius: 5px; background: #482b223f; }
.chat-mute p { color: #ebba99; margin: 0 0 7px; font-size: 12px; }
.chat-mute small { display: block; color: #cfc3b0; font-size: 11px; line-height: 1.5; }
.chat-mute button { font-size: 11px; }
.chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 10px; }
.chat-composer textarea { resize: vertical; min-height: 47px; max-height: 115px; width: 100%; padding: 8px; font: var(--chat-font-size)/1.4 "Segoe UI", system-ui, sans-serif; background: #0b141a; color: #efe9df; border: 1px solid #8c9a9866; border-radius: 4px; }
.chat-composer button { padding: 8px; align-self: start; min-height: 43px; }
.chat-count { grid-column: 1 / -1; text-align: right; color: #a1aaa5; font-size: 10px; }
.chat-announcements.check-setting { font-size: 10px; margin: 10px 0 0; }
.chat-settings .settings-row input[type="range"] { width: 50%; accent-color: #dda16c; min-width: 90px; }
.chat-settings .check-setting { line-height: 1.5; align-items: flex-start; margin-top: 15px; }
#map-availability-note { margin: 9px 0 0; line-height: 1.5; }
@media (min-width: 761px) {
  .minimap-panel { bottom: 20px; }
  .combat-dock { left: calc((100% - 220px) / 2); max-width: calc(100% - 240px); }
}
@media (min-width: 1001px) and (max-width: 1280px) {
  .combat-dock { grid-template-columns: minmax(220px, 1fr) auto; }
  .combat-dock .dock-controls { display: none; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .combat-dock { width: calc(100% - 195px); max-width: none; left: calc((100% - 175px) / 2); grid-template-columns: minmax(0, 1fr); grid-template-rows: 82px 65px 54px; height: 241px; gap: 8px; padding: 11px; }
  .combat-dock .player-vitals { width: 100%; }
  .combat-dock .spell-bar { width: 100%; height: 65px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .combat-dock .spell-bar .spell { min-width: 0; width: 100%; height: 65px; padding: 10px 0 7px; }
  .combat-dock .spell-bar .spell > svg { width: 29px; height: 29px; }
  .combat-dock .dock-controls { display: none; }
  .combat-dock .rune-slot-wrap { min-width: 0; margin: 0; padding: 0; border: 0; }
}
@media (max-width: 1100px) {
  .header-actions { gap: 11px; }
  .scoreboard { width: 310px; right: 15px; padding: 10px; }
  .room-chat { left: 15px; width: 310px; }
  .spectator-note { max-width: 300px; left: 51%; }
}
@media (max-width: 760px) {
  .header-actions { gap: 9px; }
  .social-header-button > span { display: none; }
  .social-header-button { min-width: 28px; min-height: 34px; }
  .social-header-button .social-badge { position: absolute; right: -7px; top: -1px; }
  .scoreboard { width: min(300px, calc(100% - 24px)); top: 105px; right: 12px; max-height: min(280px, calc(100% - var(--dock-height, 220px) - 280px)); }
  .player-table thead th { padding: 6px 3px; font-size: 9px; }
  .player-table thead th:nth-child(2), .player-table thead th:nth-child(3) { width: 32px; }
  .player-table thead th:nth-child(4) { width: 69px; }
  .player-row th, .player-row td { padding: 6px 3px; }
  .player-full-name { font-size: 12px; }
  .room-chat { left: 12px; width: min(310px, calc(100% - 24px)); bottom: calc(var(--dock-height, 220px) + 16px); }
  .room-chat.is-open { width: calc(100% - 24px); bottom: 12px; }
  .chat-recent { max-height: 125px; }
  .chat-recent .chat-message { padding: 4px 7px; }
  .chat-panel { max-height: calc(100dvh - 120px); }
  .chat-history { max-height: 30dvh; }
  .social-dialog .social-panel { padding: 18px; }
  .expanded-scoreboard .player-table { min-width: 510px; }
  .expanded-scoreboard .player-full-name { font-size: 13px; }
  .expanded-players { max-height: calc(100dvh - 235px); }
  .spectator-note { max-width: 290px; bottom: calc(var(--dock-height, 220px) + 65px); left: 50%; padding: 9px; font-size: 9px; }
  .spectator-note > span { font-size: 10px; margin-top: 5px; }
  .kill-feed { right: 12px; bottom: calc(var(--dock-height, 220px) + 175px); max-width: 260px; font-size: 10px; }
  .result-name .player-full-name { font-size: 11px; }
  .result-name { padding-right: 3px !important; }
  .result-name .player-identity { display: block; padding-right: 29px; }
  .result-name .player-full-name { display: block; overflow-wrap: anywhere; }
  .result-name .player-markers { display: block; font-size: 8px; margin-left: 0; }
  .result-name .player-menu-button { top: 8px; }
  .result-ping { display: block; font-size: 8px; margin-left: 0; }
}
@media (max-width: 380px) {
  .topbar { gap: 5px; }
  .header-actions { gap: 6px; }
  .social-header-button { min-width: 24px; }
  .social-drawer .social-panel { padding: 15px; }
  .social-tabs button { font-size: 11px; }
}
@media (max-width: 580px) {
  .expanded-scoreboard .player-table { display: block; min-width: 0; }
  .expanded-scoreboard .player-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .expanded-scoreboard .player-table tbody { display: block; }
  .expanded-scoreboard .player-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 35px; gap: 6px; padding: 12px 3px; border-bottom: 1px solid var(--line); }
  .expanded-scoreboard .player-row th, .expanded-scoreboard .player-row td { border: 0; height: auto; padding: 0 4px; min-width: 0; }
  .expanded-scoreboard .player-cell { grid-column: 1 / 4; grid-row: 1; border-left: 2px solid var(--player-color) !important; }
  .expanded-scoreboard .player-row .player-full-name { white-space: normal; }
  .expanded-scoreboard .player-row .player-stat { text-align: left; font-size: 14px; grid-row: 2; }
  .expanded-scoreboard .player-ping { grid-column: 3 / 5; grid-row: 2; text-align: left; font-size: 12px; }
  .expanded-scoreboard [data-label]::before { content: attr(data-label); display: block; font-size: 9px; line-height: 1.8; text-transform: uppercase; color: #b7b7aa; }
  .expanded-scoreboard .player-actions { grid-column: 4; grid-row: 1; }
  .expanded-scoreboard .player-quick-mute { grid-column: 1 / -1; grid-row: 3; }
  .expanded-scoreboard .player-quick-mute:has(button[hidden]) { display: none; }
  .expanded-scoreboard .player-quick-mute button { min-height: 28px; }
  .expanded-players { min-height: 100px; flex: 1 1 auto; max-height: none; }
}
@media (max-height: 700px) and (min-width: 761px) {
  .scoreboard { top: 15px; max-height: calc(100% - 260px); }
  .player-row th, .player-row td { padding-top: 5px; padding-bottom: 5px; height: 37px; }
  .room-chat { bottom: calc(var(--dock-height, 165px) + 12px); }
  .room-chat.is-open { bottom: 12px; }
  .chat-recent { max-height: 150px; }
}
@media (max-width: 760px) and (max-height: 720px) {
  .scoreboard { padding: 6px; }
  .scoreboard > .list-heading { display: none; }
  #scoreboard-button { margin-top: 3px; padding: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-message { transition: none; }
}