.comm-panel{position:fixed;z-index:25;left:16px;bottom:34px;width:245px;background:#092832ed;border:1px solid #8eae8d66;border-radius:7px;color:#c6d9c5;box-shadow:0 7px 25px #001a2566;font:12px system-ui}.comm-heading{display:flex;gap:8px;padding:7px 9px;align-items:center;background:#21454099}.comm-heading select{flex:1;min-width:0;background:#0b2933;color:#d3e2cd;border:1px solid #94ad8c55;padding:6px;border-radius:4px;font-size:11px}.comm-heading button{background:none;color:#ead9ab;font-size:20px;padding:0 7px}.comm-body{padding:9px}.comm-messages{height:96px;overflow:auto;margin:0 0 7px;padding:0;list-style:none;scrollbar-width:thin;font-size:11px;line-height:1.5;overflow-wrap:anywhere}.comm-messages li{margin-bottom:5px}.comm-messages strong{color:#a6e6bf}.comm-form{display:flex;gap:4px}.comm-form input{width:100%;min-width:0;background:#061d28;border:1px solid #76998266;border-radius:4px;padding:9px 7px;color:#e7e9cf;font-size:11px}.comm-form button{background:#406d58;border:1px solid #92b68b66;color:#f0dfa8;border-radius:4px;padding:6px 9px}.comm-voice-row{display:flex;gap:5px;margin-top:9px}.comm-voice-row button{font-size:10px;padding:7px 8px;border:1px solid #97ac7b66;border-radius:4px;background:#264839;color:#d7e9bd}.comm-voice-status{display:block;font-size:10px;line-height:1.5;color:#afc8ba;margin:7px 0 0}.comm-pings{display:flex;gap:5px;margin-top:8px}.comm-pings button{flex:1;background:#173c40;border:1px solid #7b9b7855;border-radius:4px;padding:5px;color:#e1d59c;font-size:15px}.comm-unread{color:#e9bf77}.screen-home .comm-panel,.screen-auth .comm-panel,.screen-tavern .comm-panel{display:none}
.teams-dialog{width:720px;max-width:calc(100vw - 32px);max-height:90vh;overflow:auto;padding:36px}.teams-dialog h2{font:34px Georgia}.teams-dialog h3{font:24px Georgia;color:#e8d5a4}.teams-dialog p{font-size:13px;line-height:1.7;color:#afc7b7}.teams-dialog label{display:grid;gap:9px;font-size:11px;margin-bottom:14px;color:#c5d6bc}.teams-dialog input,.teams-dialog select{font:14px system-ui;background:#0b2933;color:#eadfc0;border:1px solid #87a18177;padding:12px;border-radius:4px;width:100%}.team-crest{width:76px;height:86px;clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);display:grid;place-items:center;background:#31634c;border:2px solid #b8d19b;color:#f7edbd;font:700 23px Georgia;letter-spacing:.04em}.team-crest.ruby{background:#77384d}.team-crest.gold{background:#8a713e}.team-crest.violet{background:#5c4476}.team-record{display:flex;gap:18px;align-items:center;background:#183a3b;padding:17px;border-radius:5px}.team-record strong{font:24px Georgia;color:#f0d49a}.team-record span{font-size:12px}.team-members{list-style:none;padding:0}.team-members li{display:flex;align-items:center;justify-content:space-between;padding:11px;border-bottom:1px solid #78917c33;font-size:14px}.team-members button{font-size:9px;padding:8px;min-height:32px}.team-join,.team-create,.team-edit{border-top:1px solid #95aa7a44;padding-top:20px;margin-top:20px}.team-create .button{margin-top:15px}.team-leave{margin-top:30px;color:#b3bfa8;font-size:12px}.team-leave summary{cursor:pointer}.teams-status{color:#e7c18b!important}
@media(min-width:1200px){.screen-game .comm-panel{width:228px;bottom:25px}.screen-game .comm-messages{height:78px}.screen-game .comm-voice-status{max-height:42px;overflow:auto}}
@media(max-width:1199px){.screen-game .comm-panel{left:12px;bottom:167px;width:220px}.screen-game .comm-messages{height:76px}.screen-game .comm-voice-status{font-size:9px}}
@media(max-width:800px){.comm-panel{left:10px;bottom:170px;width:190px}.comm-messages{height:60px}.comm-voice-row button{font-size:9px;padding:6px}.comm-voice-status{font-size:9px}.teams-dialog{padding:28px 22px}}

.comm-secure-help{display:block;color:#dfc08d;font:10px/1.5 system-ui;margin:10px 0;text-decoration:underline}

/* Dimensional client: team chat shares the violet/gold interface palette.
   Scene positioning remains owned by the client shell; only lobby offset is
   calculated here so the panel never sits over the navigation rail. */
html[data-layout=dimensions] .comm-panel{
 color-scheme:dark;color:#eddfeb;border-color:#d3b5908c;border-radius:12px;
 background:linear-gradient(145deg,#493650f5,#29324af7);
 box-shadow:inset 0 1px #e5c6db30,0 8px 26px #21152e66,0 0 0 1px #aa86bc26;
 max-width:min(300px,calc(100vw - 24px));max-height:calc(100dvh - var(--ds-header-height,76px) - 150px);
 overflow:hidden;backdrop-filter:blur(14px);font:12px/1.5 system-ui,sans-serif;
}
html[data-layout=dimensions] body.screen-lobby .comm-panel{
 --comm-client-left:calc(clamp(110px,9vw,160px) + clamp(16px,2vw,42px) + 20px);
 left:var(--comm-client-left);bottom:115px;width:268px;
 max-width:min(300px,calc(100vw - var(--comm-client-left) - 24px));
}
html[data-layout=dimensions] .comm-panel .comm-heading{
 padding:9px 10px;gap:8px;border-bottom:1px solid #b79cbd45;
 background:linear-gradient(110deg,#70517b8c,#3e3c5f80);
}
html[data-layout=dimensions] .comm-panel .comm-heading>select{
 background:#252b43;color:#f4e6cf;border:1px solid #c1a2c07a;
 border-radius:7px;font:11px/1.4 system-ui;padding:7px;min-height:33px;
}
html[data-layout=dimensions] .comm-panel .comm-heading>select>option{background:#252b43;color:#f4e6cf}
html[data-layout=dimensions] .comm-panel .comm-heading>button{
 background:#46354f80;color:#ffe0ab;border:1px solid #b49aba66;border-radius:7px;
 min-width:31px;min-height:31px;font:19px/1 system-ui;padding:3px 7px;
}
html[data-layout=dimensions] .comm-panel .comm-body{
 padding:10px;max-height:calc(100dvh - var(--ds-header-height,76px) - 200px);overflow:auto;
 scrollbar-width:thin;scrollbar-color:#a38ab7 #302c44;
}
html[data-layout=dimensions] .comm-panel .comm-messages{color:#e0d2e3;line-height:1.6;scrollbar-color:#a38ab7 #302c44}
html[data-layout=dimensions] .comm-panel .comm-messages li{padding:3px 0;border-bottom:1px solid #b79cbd1f}
html[data-layout=dimensions] .comm-panel .comm-messages strong{color:#f4d69f}
/* This specificity intentionally beats the legacy light-theme input rule. */
html[data-layout=dimensions] body .comm-panel .comm-body .comm-form>input{
 background:#24283e;color:#faecf7;border-color:#c4a2c578;border-radius:7px;
 font:11px/1.5 system-ui;caret-color:#ffdf9e;padding:9px 8px;
}
html[data-layout=dimensions] .comm-panel .comm-form>input::placeholder{color:#beb0c9;opacity:1}
html[data-layout=dimensions] .comm-panel :is(.comm-form>button,.comm-voice-row>button,.comm-pings>button){
 background:linear-gradient(120deg,#73507e,#4b4265);color:#fff0cc;border-color:#bda0b980;border-radius:7px;
 box-shadow:inset 0 1px #e4c4d92b;
}
html[data-layout=dimensions] .comm-panel :is(.comm-form>button,.comm-voice-row>button,.comm-pings>button,.comm-heading>button):hover{
 border-color:#edcd98;background:linear-gradient(120deg,#8b6499,#5d4a76);box-shadow:inset 0 1px #f2d6b84d,0 0 10px #ad86ce30;
}
html[data-layout=dimensions] .comm-panel :is(button,input,select):focus-visible{
 outline:2px solid #f2d29c;outline-offset:2px;border-color:#f2d29c;
}
html[data-layout=dimensions] .comm-panel .comm-voice-status{color:#c6dbd0;line-height:1.55}
html[data-layout=dimensions] .comm-panel .comm-unread{color:#ffe3a8}
html[data-layout=dimensions] .comm-panel .comm-secure-help{color:#e7cba9;margin-bottom:2px;font-size:10px;line-height:1.6}
html[data-layout=dimensions] .comm-panel:has(.comm-body[hidden]) .comm-heading{border-bottom-color:transparent}

/* Desktop chat hugs the arena edge, with room reserved for the combat dock. */
html:not([data-device-layout=mobile]) body.screen-game .comm-panel:not([hidden]){
 left:var(--comm-game-left,12px);bottom:var(--comm-game-bottom,calc(var(--ds-utility-height,0px) + 12px));
 width:var(--comm-game-width,min(234px,calc(100vw - 24px)));
 max-height:var(--comm-game-height,min(290px,calc(100dvh - 120px)));
 box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;
}
html:not([data-device-layout=mobile]) body.screen-game .comm-panel .comm-heading{flex:none}
html:not([data-device-layout=mobile]) body.screen-game .comm-panel .comm-body{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}

/* During touch play the chat stays out of the arena until explicitly opened. */
#gameUI .game-top-actions > .comm-touch-toggle {
 display:none;
}
html[data-device-layout=mobile] body.screen-game #gameUI .game-top-actions > .comm-touch-toggle:not([hidden]) {
 display:inline-flex;
 position:relative;
 align-items:center;
 justify-content:center;
 width:44px;
 height:44px;
 min-width:44px;
 min-height:44px;
 padding:0;
 border-radius:6px;
 border-color:var(--arena-line,#8eae8d66);
 background:var(--arena-panel,#0b252d);
 color:var(--arena-text,#f4e6cf);
 font:700 11px/1 system-ui,sans-serif;
}
.comm-touch-unread {
 position:absolute;
 top:5px;
 right:5px;
 width:7px;
 height:7px;
 border-radius:50%;
 background:var(--arena-highlight,#ffe3a8);
}
html[data-device-layout=mobile] body.screen-game .comm-panel:not([data-touch-open=true]),
html[data-device-layout=mobile] body.screen-game[data-festival=true] .comm-panel {
 display:none;
}
html[data-device-layout=mobile] body.screen-game .comm-panel[data-touch-open=true] {
 --comm-safe-left:max(8px,env(safe-area-inset-left));
 --comm-safe-right:max(8px,env(safe-area-inset-right));
 --comm-top:max(calc(96px + env(safe-area-inset-top)),calc(var(--comm-vtop,0px) + 8px));
 --comm-bottom:max(174px,27dvh,env(safe-area-inset-bottom));
 box-sizing:border-box;
 inset:var(--comm-top) var(--comm-safe-right) auto auto;
 width:min(360px,calc(100vw - var(--comm-safe-left) - var(--comm-safe-right)));
 max-width:none;
 max-height:max(0px,min(350px,calc(var(--comm-vtop,0px) + var(--comm-vh,100dvh) - var(--comm-top) - var(--comm-bottom))));
 z-index:120;
 display:flex;
 flex-direction:column;
 border-color:var(--arena-line,#8eae8d66);
 background:var(--arena-panel,#0b252d);
 color:var(--arena-text,#f4e6cf);
}
html[data-device-layout=mobile] body.screen-game .comm-panel[data-touch-open=true] .comm-heading {
 flex:none;
 padding:5px 8px;
}
html[data-device-layout=mobile] body.screen-game .comm-panel[data-touch-open=true] .comm-heading > :is(select,button) {
 box-sizing:border-box;
 min-height:44px;
}
html[data-device-layout=mobile] body.screen-game .comm-panel[data-touch-open=true] .comm-heading > button {
 min-width:44px;
}
html[data-device-layout=mobile] body.screen-game .comm-panel[data-touch-open=true] .comm-body {
 min-height:0;
 max-height:none;
 padding:8px;
 overflow-y:auto;
 overscroll-behavior:contain;
}
html[data-device-layout=mobile] body.screen-game .comm-panel[data-touch-open=true] .comm-messages {
 height:clamp(36px,11dvh,88px);
 overscroll-behavior:contain;
}
html[data-device-layout=mobile] body.screen-game .comm-panel[data-touch-open=true] :is(.comm-form input,.comm-form button,.comm-voice-row button,.comm-pings button) {
 box-sizing:border-box;
 min-height:44px;
}
html[data-device-layout=mobile] body.screen-game .comm-panel[data-touch-open=true] .comm-form button {
 min-width:44px;
}
html[data-device-layout=mobile] body.screen-game .comm-panel[data-touch-open=true] .comm-voice-row {
 flex-wrap:wrap;
}
@media (orientation:landscape) {
 html[data-device-layout=mobile] body.screen-game .comm-panel[data-touch-open=true] {
  --comm-bottom:max(50px,env(safe-area-inset-bottom));
  inset-inline-start:50%;
  inset-inline-end:auto;
  width:min(360px,52vw);
  transform:translateX(-50%);
 }
}
html[data-device-layout=mobile] body.screen-game .comm-panel[data-touch-open=true][data-touch-keyboard=true] {
 --comm-top:calc(var(--comm-vtop,0px) + 8px);
 --comm-bottom:8px;
}
html[data-device-layout=mobile] body.screen-game .comm-panel[data-touch-keyboard=true] .comm-messages {
 height:clamp(0px,calc(var(--comm-vh,100dvh) - 132px),74px);
}