/* Shared arcade chat. These rules are scoped to the chat panel. */
.chat-heading{align-items:center;gap:18px;margin-bottom:18px}
.chat-heading>div{min-width:0;flex:1}
.chat-heading h2{color:#f2f8ff}
.chat-heading p{margin:8px 0 0;color:#adbed5;line-height:1.6;max-width:660px;overflow-wrap:anywhere}
.chat-heading #chat-refresh{flex:none;min-height:44px;box-shadow:none}
.chat-workspace{display:grid;grid-template-columns:232px minmax(0,1fr);align-items:stretch;gap:18px;min-width:0;max-width:1160px;height:max(490px,calc(100dvh - 265px));max-height:900px;margin-inline:auto}
.chat-sidebar{display:flex;flex-direction:column;gap:18px;min-width:0;min-height:0;padding:18px 14px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border:1px solid #334c6c;border-radius:20px;background:linear-gradient(160deg,#162840,#101a2c);scrollbar-width:thin;scrollbar-color:#496480 #101a2c}
.chat-nav-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;color:#e8f2ff}
.chat-nav-heading h3,.chat-nav-heading h4{margin:0;font-family:var(--display,Impact,sans-serif);font-size:14px;font-weight:400;line-height:1.5}
.chat-nav-heading strong{color:#9db4cc;font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;line-height:1.5}
.chat-sidebar>.chat-nav-heading:first-child strong{color:#e8f2ff;font-family:var(--display,Impact,sans-serif);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none}
#chat-online-count{display:grid;place-items:center;flex:none;min-width:22px;height:22px;padding-inline:5px;border:1px solid #5c7b8e44;border-radius:999px;background:#28435077;color:#a5dfd2;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.chat-sidebar section{min-width:0}
.chat-sidebar section>h3,.chat-sidebar section>h4,.chat-sidebar .chat-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 9px;color:#90acc7;font:700 10px/1.5 var(--body,Rubik,Arial,sans-serif);letter-spacing:1.1px;text-transform:uppercase}
.chat-sidebar p{margin:4px 0;color:#8ca5c0;font-size:11px;line-height:1.6;overflow-wrap:anywhere}
.chat-room-button{display:grid;grid-template-columns:23px minmax(0,1fr);align-items:center;gap:3px 10px;min-width:0;min-height:48px;width:100%;padding:12px 13px;border:1px solid #3c586a;border-radius:12px;background:#1a3342;color:#c4eff0;font-size:12px;font-weight:700;text-align:left;overflow-wrap:anywhere}
.chat-room-button::before{content:"#";grid-column:1;grid-row:1 / span 2;color:#89d8d8;font:400 23px/1 var(--display,Impact,sans-serif)}
.chat-room-button small{display:block;grid-column:2;grid-row:2;color:#9bbbc9;font-size:10px;font-weight:400;line-height:1.5}
.chat-room-button.is-active,.chat-room-button.active,.chat-room-button[aria-current="true"]{border-color:#73c8bf;background:#24544c88;color:#e4fff2;box-shadow:inset 3px 0 0 #9debc8}
.chat-inbox,.chat-people-list{display:flex;flex-direction:column;gap:6px;min-width:0}
.chat-person{display:flex;align-items:center;gap:9px;width:100%;min-width:0;min-height:56px;padding:10px 9px;border:1px solid transparent;border-radius:11px;color:#dbe9f7;background:#17283d77;font:400 12px/1.4 var(--body,Rubik,Arial,sans-serif);text-align:left}
.chat-person:hover{background:#23405a88;border-color:#57758d77}
.chat-person.is-active,.chat-person.active,.chat-person[aria-current="true"]{background:#39355788;border-color:#9883bc77;box-shadow:inset 3px 0 0 #bea3ec}
.chat-person-copy{display:block;flex:1;min-width:0}
.chat-person-name{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ecf3ff;font-size:12px;font-weight:700}
.chat-person-preview{display:block;min-width:0;max-width:100%;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#98afc8;font-size:10px;font-weight:400}
.chat-online-dot{display:block;flex:none;width:7px;height:7px;border-radius:50%;background:#64748a}
.chat-people-list .chat-online-dot,.chat-online-dot.is-online,.chat-online-dot[data-online="true"]{background:#87e7bd;box-shadow:0 0 10px #78edcf33}
.chat-unread{display:grid;place-items:center;flex:none;min-width:21px;height:21px;padding-inline:5px;border-radius:999px;color:#d9cbff;background:#5b487999;border:1px solid #b699db44;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.chat-tab-unread.chat-unread{display:inline-grid;min-width:18px;height:18px;margin-left:6px;padding-inline:4px;font-size:9px;vertical-align:middle;line-height:1}
.chat-tab-unread[hidden]{display:none!important}
.chat-thread{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;height:100%}
.chat-thread .chat-shell{display:flex;flex-direction:column;flex:1;width:100%;min-height:0;min-width:0;max-width:none;margin:0}
.chat-thread .chat-messages{flex:1;min-height:160px;height:auto;padding-block:17px}
.chat-thread .chat-room-note{flex:none;width:100%;min-width:0;margin:0;font-size:11px;line-height:1.5}
.chat-thread .chat-room-bar{align-items:flex-start;gap:8px;padding:13px 16px}
.chat-thread .chat-room-bar>div:first-child{flex:1;min-width:0}
.chat-thread #chat-connection{order:1}
.chat-thread .chat-room-title{flex:1;min-width:0;line-height:1.4}
.chat-thread-kind{display:inline-flex;align-items:center;min-height:22px;padding:3px 7px;margin-bottom:6px;border:1px solid #75d7ce44;border-radius:6px;color:#a2e5df;background:#23534b44;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;line-height:1.4}
#chat-thread-title{display:block;min-width:0;margin:0;color:#edf6ff;font-size:15px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
#chat-thread-note,#chat-room-note-small{display:block;margin:4px 0 0;color:#9fb5cb;font-size:11px;font-weight:400;line-height:1.5;overflow-wrap:anywhere}
.chat-thread[data-mode="private"] .chat-thread-kind,.chat-thread.is-private .chat-thread-kind{border-color:#b293d855;color:#d6c4f9;background:#4b356444}
.chat-thread[data-mode="private"] .chat-room-bar,.chat-thread.is-private .chat-room-bar{background:linear-gradient(110deg,#2a2744aa,#1a2c40aa)}
.chat-thread-controls{display:flex;align-items:center;flex-wrap:wrap;gap:7px;flex-basis:100%;min-width:0;order:2}
.chat-thread-controls .btn,.chat-thread-controls button,.chat-sidebar-close{min-height:44px;min-width:44px;max-width:100%;padding:10px 12px;border:1px solid #46617f;border-radius:10px;background:#21334c;color:#c5dcef;font-size:11px;font-weight:700;line-height:1.4;box-shadow:none;overflow-wrap:anywhere}
#chat-block{color:#ffc5d4;border-color:#86516c;background:#572d4055}
#chat-people-toggle,.chat-sidebar-close{display:none}
#chat-block-notice{flex:none;margin:0;padding:11px 16px;border-bottom:1px solid #92614755;color:#ffd1b5;background:#54372755;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.chat-room-button:focus-visible,.chat-person:focus-visible,.chat-thread-controls button:focus-visible,.chat-sidebar-close:focus-visible{outline:2px solid #a5ff5b;outline-offset:2px}
.chat-workspace [hidden]{display:none!important}
.chat-shell{position:relative;display:flex;flex-direction:column;min-width:0;max-width:980px;margin-inline:auto;overflow:hidden;border:1px solid #334c6c;border-radius:22px;background:linear-gradient(145deg,#14233a,#101a2c);box-shadow:0 18px 48px #0003}
.chat-room-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid #304563;background:#192b43aa}
.chat-room-title{min-width:0;color:#e6f6ff;font-size:.94rem;font-weight:900;letter-spacing:.3px;overflow-wrap:anywhere}
#chat-connection{display:inline-flex;align-items:center;gap:7px;flex:none;max-width:100%;padding:6px 10px;border:1px solid #4a716e66;border-radius:999px;color:#9de6cc;background:#173e3544;font-size:11px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
#chat-connection::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor;box-shadow:0 0 9px #78edcf44}
#chat-connection.is-offline,#chat-connection[data-state="offline"],#chat-connection[data-state="error"]{color:#ffbe99;background:#5f382133;border-color:#aa6b4544}
.chat-messages{display:flex;flex-direction:column;gap:12px;height:clamp(280px,48dvh,550px);min-height:0;min-width:0;padding:22px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#496480 #101a2c;scroll-padding-block:18px}
.chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;margin:auto;text-align:center;max-width:440px;padding:24px 18px;color:#aac1db}
.chat-empty::before{content:"";display:block;width:42px;height:34px;margin:0 0 20px;border:2px solid #76d8d9;border-radius:13px 13px 13px 3px;background:linear-gradient(145deg,#2a65683b,#17395618);box-shadow:0 0 24px #55e7ed10}
.chat-empty h3{margin:0 0 8px;color:#e5f3ff;font-size:1.1rem;line-height:1.45}
.chat-empty p{margin:0;font-size:.9rem;line-height:1.65;overflow-wrap:anywhere}
.chat-message{align-self:flex-start;flex:none;width:fit-content;min-width:0;max-width:min(88%,720px);padding:11px 15px 13px;border:1px solid #3f557455;border-radius:15px 15px 15px 4px;background:#21314b88;box-shadow:0 3px 10px #0001}
.chat-message.is-own{align-self:flex-end;border-color:#53bda13b;border-radius:15px 15px 4px 15px;background:linear-gradient(140deg,#1f4b4655,#173d4155)}
.chat-message-head{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:4px;line-height:1.4}
.chat-author{min-width:0;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9fe7ea;font-size:12px;font-weight:700}
.chat-message.is-own .chat-author{color:#b2edbb}
.chat-message-head time{flex:none;color:#8fa7c3;font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.chat-hide{flex:none;margin:-5px 0 -5px auto;padding:7px 8px;min-height:44px;min-width:44px;border-radius:8px;font-size:10px;color:#9dafc7;line-height:1.3}
.chat-hide:hover{color:#f3f8ff;background:#ffffff0a}
.chat-hide:focus-visible,.chat-compose textarea:focus-visible,.chat-compose .link:focus-visible,.chat-new-message:focus-visible{outline:2px solid #a5ff5b;outline-offset:3px}
.chat-text{min-width:0;margin:0;color:#ecf2fd;font-size:.92rem;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;tab-size:2}
.chat-compose{flex:none;min-width:0;padding:18px 22px 15px;background:#0d1729b8;border-top:1px solid #304563}
.chat-compose-row{display:flex;align-items:stretch;gap:10px;min-width:0}
#chat-input{display:block;flex:1;width:0;min-width:0;min-height:76px;max-height:180px;margin:0;padding:12px 14px;border:1px solid #405975;border-radius:12px;color:#f3f7ff;background:#17253b;font:400 16px/1.5 var(--body,Rubik,system-ui,Arial,sans-serif);resize:vertical;overflow-wrap:anywhere;transition:border-color .15s,background .15s}
#chat-input::placeholder{color:#8196b2;opacity:1}
#chat-input:focus{border-color:#67c6be;background:#1a2b40;outline:none}
#chat-input:disabled{opacity:.65;cursor:default}
#chat-send{flex:none;min-width:82px;padding:12px 18px;border-radius:12px;box-shadow:none;align-self:stretch;font-size:.9rem}
.chat-compose-foot{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;min-width:0;margin-top:11px;color:#8fa7c3;font-size:11px;line-height:1.6}
#chat-length{flex:none;font-variant-numeric:tabular-nums}
#chat-nickname{min-width:0;max-width:100%;color:#aec5da;overflow-wrap:anywhere}
.chat-compose .link{display:inline-flex;align-items:center;min-height:44px;padding:5px 3px;color:#96e6d0;font-size:inherit;font-weight:700;text-decoration:underline;text-decoration-color:#96e6d044;text-underline-offset:3px;vertical-align:middle}
.chat-compose .link:hover{text-decoration-color:currentColor;color:#d4ffeb}
.chat-status{margin:8px 0 0;color:#b7cbe1;min-width:0;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.chat-status:empty{display:none}
.chat-status.is-error{color:#ffbdad}
.chat-room-note{max-width:980px;margin:14px auto 0;padding-inline:4px;color:#8fa7c3;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.chat-new-message{position:sticky;bottom:12px;z-index:1;align-self:center;flex:none;min-height:44px;margin:-44px auto 6px;padding:10px 17px;border:1px solid #82b86a;border-radius:999px;background:#a5ff5b;color:#132118;font-size:12px;font-weight:900;box-shadow:0 5px 22px #0005}
.chat-compose .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.chat-shell[hidden],.chat-heading[hidden],.chat-shell [hidden],.chat-heading [hidden],.chat-room-note[hidden],.chat-new-message[hidden]{display:none!important}
/* Moderation keeps each message and its actions together on tablets and phones. */
.chat-admin-list{display:flex;flex-direction:column;gap:12px;min-width:0;max-height:520px;padding:14px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border:1px solid #334c6c;border-radius:18px;background:linear-gradient(145deg,#14233a,#101a2c);scrollbar-width:thin;scrollbar-color:#496480 #101a2c}
.chat-admin-list .chat-admin-message{width:100%;max-width:100%;align-self:stretch;border-radius:13px;background:#21314b88;box-shadow:none}
.chat-admin-list .chat-admin-message.is-own{background:#1b393b77;border-color:#53bda13b}
.chat-admin-list>.empty{margin:8px;color:#adc1d9;font-size:.9rem;line-height:1.6}
.chat-admin-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;margin-top:12px;padding-top:10px;border-top:1px solid #ffffff0a}
.chat-admin-actions .btn,.chat-admin-bans .btn{min-height:44px;max-width:100%;padding:10px 13px;border:1px solid #46627f;border-radius:10px;background:#263b53;color:#dfedfa;font-size:12px;line-height:1.4;box-shadow:none;overflow-wrap:anywhere}
.chat-admin-actions [data-chat-action="chat-ban"]{border-color:#97536c;background:#572d4055;color:#ffc0d0}
.chat-admin-actions .btn:hover,.chat-admin-bans .btn:hover{border-color:#88b5c7}
.chat-admin-actions .btn:disabled{opacity:.5}
.chat-admin-bans{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;margin-top:14px}
.chat-admin-bans .btn{border-color:#46746a;background:#1b3e3655;color:#b9ead7;font-variant-numeric:tabular-nums}
#admin-chat-refresh,#admin-chat-clear{min-height:44px;box-shadow:none}
.chat-admin-list[hidden],.chat-admin-bans[hidden],.chat-admin-list [hidden],.chat-admin-bans [hidden]{display:none!important}
@media(min-width:701px){.chat-thread[data-mode="public"] .chat-thread-controls{display:none}}
@media(min-width:701px) and (max-width:900px){
 .chat-workspace{grid-template-columns:200px minmax(0,1fr);gap:13px}
 .chat-sidebar{padding:16px 11px;border-radius:17px}
 .chat-thread .chat-room-bar{padding:12px 13px}
 .chat-thread .chat-messages{padding-inline:13px}
 .chat-thread .chat-compose{padding:13px 13px 11px}
 .chat-thread .chat-compose-foot{font-size:10px;gap:3px 9px}
 .chat-thread .chat-author{max-width:160px;font-size:11px}
}
@media(min-width:701px) and (max-height:850px){
 .chat-workspace{height:max(440px,calc(100dvh - 265px));max-height:none}
 .chat-sidebar{gap:14px}
 .chat-thread .chat-messages{min-height:130px}
 .chat-thread .chat-empty{min-height:125px;padding:12px}
 .chat-thread .chat-empty::before{width:30px;height:24px;margin-bottom:9px}
 .chat-thread .chat-compose{padding:12px 15px 10px}
 .chat-thread #chat-input{min-height:60px;max-height:130px;padding-block:8px}
 .chat-thread .chat-compose-foot{margin-top:6px;line-height:1.4}
 .chat-thread .chat-message{padding-block:9px 10px}
}
@media(max-width:700px){
 .chat-workspace{display:block;height:auto;max-height:none}
 .chat-thread{height:auto;gap:9px}
 .chat-thread .chat-messages{flex:none;min-height:260px;height:clamp(260px,40dvh,430px)}
 .chat-thread .chat-room-bar{padding:13px 12px}
 .chat-thread .chat-room-bar>div:first-child{flex-basis:100%}
 .chat-thread #chat-connection{margin-left:0;font-size:9px;padding-inline:7px}
 .chat-thread[data-mode="public"] .chat-thread-controls{flex-basis:auto;flex:1}
 #chat-people-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
 .chat-sidebar{display:none}
 .chat-workspace.is-sidebar-open .chat-sidebar{display:flex;position:fixed;inset:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));z-index:12;width:auto;min-height:0;height:auto;max-height:calc(100dvh - 24px);padding:18px;border-radius:18px;border-color:#59718e;background:linear-gradient(160deg,#1b2f49,#101b2f);box-shadow:0 0 0 100vmax #030a18bb,0 18px 80px #0008}
 .chat-workspace.is-sidebar-open .chat-sidebar-close{display:inline-flex;align-items:center;justify-content:center;flex:none}
 .chat-person{min-height:58px;padding:11px 12px}
 .chat-person-name{font-size:13px}
 .chat-person-preview{font-size:11px}
 .chat-sidebar section>h3,.chat-sidebar section>h4,.chat-sidebar .chat-section-title{font-size:11px}
 .chat-thread .chat-room-note{font-size:11px}
}
@media(max-width:600px){
 .chat-heading{align-items:flex-start;gap:12px;margin-bottom:14px}
 .chat-heading h2{font-size:1.5rem}
 .chat-heading p{font-size:.9rem;line-height:1.5}
 .chat-heading #chat-refresh{padding:10px 13px;font-size:12px}
 .chat-shell{border-radius:17px}
 .chat-room-bar{padding:14px;gap:9px}
 .chat-room-title{font-size:13px}
 #chat-connection{font-size:10px;padding:5px 8px}
 .chat-messages{gap:10px;padding:15px 12px;height:clamp(280px,46dvh,450px)}
 .chat-message{max-width:95%;padding:10px 12px 12px}
 .chat-message-head{gap:8px}
 .chat-author{max-width:150px;font-size:11px}
 .chat-text{font-size:14px;line-height:1.65}
 .chat-compose{padding:13px 12px 12px}
 .chat-compose-row{gap:8px}
 #chat-input{padding:10px 11px;min-height:76px}
 #chat-send{min-width:68px;padding:11px;font-size:12px}
 .chat-compose-foot{gap:4px 10px;font-size:10px}
 .chat-room-note{margin-top:11px;font-size:11px;padding-inline:1px}
 .chat-admin-list{gap:10px;padding:10px;border-radius:15px;max-height:480px}
 .chat-admin-actions{gap:7px;margin-top:10px;padding-top:9px}
 .chat-admin-actions .btn,.chat-admin-bans .btn{font-size:11px;padding:10px 12px}
}
@media(min-width:601px) and (max-height:900px) and (orientation:landscape){
 .chat-messages{height:clamp(220px,calc(100dvh - 480px),450px)}
}
@media(max-width:360px){
 .chat-message{max-width:100%}
 .chat-message-head{gap:6px}
 .chat-author{max-width:115px}
 .chat-hide{padding-inline:6px}
 .chat-compose-foot{align-items:flex-start}
 #chat-nickname{flex-basis:100%}
}