/* Local chat surface. Navigation, account counters and the site font come from WoltLab. */
/* chat-home-shared:start */
.chatGame{--chat-ink:#080f37;--chat-muted:#425b8b;--chat-blue:#006eaf;--chat-border:#c9e1fb;color:var(--chat-ink);font-family:inherit;font-size:18px;line-height:1.25;container-type:inline-size;container-name:chat-game;max-width:1688px;margin:0 auto 36px;position:relative;isolation:isolate}
/* chat-home-shared:end */
/* chat-home-shared:start */
.chatGame *,.chatGame *::before,.chatGame *::after{box-sizing:border-box}.chatGame h1,.chatGame h2,.chatGame p,.chatGame ol,.chatGame dl{margin:0}.chatGame a{color:#003be2;text-decoration:underline}.chatGame button,.chatGame input,.chatGame summary{font:inherit}.chatGame button,.chatGame summary{cursor:pointer}.chatGame :focus-visible{outline:3px solid #e4a731;outline-offset:3px}.chatGame [hidden]{display:none!important}.chatGame .chatIcon{width:30px;height:30px;display:inline-block;flex-shrink:0;vertical-align:middle}.chatSrOnly{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* chat-home-shared:end */
.chatHero{height:156px;display:flex;align-items:center;gap:22px;padding:20px 19px 24px;position:relative;background:url('images/chat-skyline.svg') right bottom/1000px 156px no-repeat}.chatHeroText{position:relative;z-index:1}.chatHero h1{font-size:48px;font-weight:850;letter-spacing:-1.25px;line-height:1.12}.chatHero p{font-size:22px;margin-top:7px;max-width:750px}.chatHeroSuffix{white-space:nowrap}.chatGamePicker{position:absolute;right:10px;top:6px;z-index:6;font-size:12px}.chatGamePicker summary{list-style:none;display:flex;align-items:center;gap:5px;padding:4px 8px;background:#ffffffa8;border-radius:12px;color:#315b80}.chatGamePicker .chatIcon{width:13px;height:13px}.chatGamePicker nav{position:absolute;right:0;width:220px;max-height:260px;overflow:auto;background:white;padding:8px;border:1px solid var(--chat-border);border-radius:12px;box-shadow:0 5px 20px #16385828}.chatGamePicker nav a{display:block;padding:9px;border-radius:6px}.chatGamePicker a[aria-current]{background:#dfedfc;font-weight:bold}
.chatLayout{display:grid;grid-template-columns:minmax(230px,1.15fr) minmax(460px,2.49fr) minmax(260px,1fr);gap:14px;align-items:start}.chatLeft,.chatRight{display:flex;flex-direction:column;gap:14px;min-width:0}.chatRight{padding-top:28px}.chatCard{min-width:0;border:1px solid var(--chat-border);border-radius:23px;background:linear-gradient(125deg,#ffffffed,#f9fcffed);box-shadow:0 2px 2px #4380b20c,0 8px 22px #4380b208}.chatGame details>summary{list-style:none}.chatGame summary::-webkit-details-marker{display:none}.chatCard>summary{display:flex;align-items:center;padding:22px 23px 12px}.chatCard>summary>.chatIcon:first-child{color:#086fae}.chatDisclosureBody{padding:0 26px 18px}.chatSteps{list-style:none;padding:0!important}.chatSteps li{display:flex;align-items:flex-start;gap:19px;margin-top:8px;font-size:18px;line-height:1.28}.chatSteps li>span{display:grid;place-items:center;flex:0 0 29px;height:29px;border-radius:50%;color:white;background:linear-gradient(140deg,#68a0d0,#286a9f);box-shadow:inset 0 0 0 1px #3474a8;font-size:22px;font-weight:bold;margin-top:2px}.chatSteps p{flex:1}.chatCustomRules{white-space:pre-line;font-size:14px;margin-top:12px!important}.chatCustomRules:empty{display:none}.chatRules{min-height:377px}.chatParticipants{padding:23px 25px;min-height:251px}.chatParticipantLabel{display:flex;align-items:center;gap:12px;margin-top:17px!important;font-size:19px}.chatParticipantLabel .chatIcon{width:24px;height:24px;color:#006eaf}.chatPlayerList{display:flex;align-items:center;gap:6px;margin-top:20px;min-height:48px}.chatPlayer{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:8px;overflow:hidden;color:#2b5b80;background:linear-gradient(#e4f1ff,#c9e3fb);font-size:16px;font-weight:bold;box-shadow:none}.chatPlayer img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;min-width:100%;max-width:none;max-height:none;border:0;margin:0;padding:0;box-shadow:none}.chatPlayerMore{border-radius:50%;font-size:21px;color:#071b4c}
.chatCenter{box-shadow:0 2px 3px #4380b210,0 12px 30px #4380b20d}.chatState{display:flex;gap:24px;padding:17px 18px 12px 24px;min-height:103px}.chatCurrent{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 26px;border-radius:18px;background:linear-gradient(120deg,#e8f4ff,#dceefc)}.chatPinBadge{display:grid;place-items:center;flex:0 0 56px;height:56px;border-radius:50%;background:linear-gradient(#d2ebff,#b9defb);color:#0073ad;box-shadow:0 2px 3px #2b70a32b}.chatPinBadge .chatIcon{width:34px;height:40px}.chatCurrentText{flex:1 1 120px;min-width:80px}.chatCurrentText>span{font-size:16px}.chatCurrentText>strong{display:block;font-size:30px;line-height:1.1;font-weight:800;overflow-wrap:anywhere}.chatLetterWrap{display:flex;align-items:center;gap:13px;border-left:1px solid #73a8dc;padding-left:12px;font-size:16px;white-space:normal;flex:0 1 auto;flex-wrap:wrap;max-width:100%}.chatLetterWrap strong{display:grid;place-items:center;width:55px;height:50px;border:1px solid #bcdcf4;border-radius:17px;background:linear-gradient(#d9edff,#b9ddf8);box-shadow:0 2px 3px #3874a533;font-size:31px;line-height:1}.chatCount{display:flex;align-items:center;justify-content:center;gap:12px;flex:0 1 170px;min-width:80px;border-radius:17px;background:linear-gradient(130deg,#e2efff,#cce6ff);font-size:20px;white-space:normal}.chatCount .chatIcon{color:#0074b3;width:36px;height:36px}.chatConversation{container-type:inline-size;container-name:chat-conversation;padding:0 12px 15px}.chatMessages{height:454px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bed7ef transparent;padding:0;scroll-behavior:smooth}.cityChainEntries{list-style:none;padding:0!important;display:flex;flex-direction:column;gap:0}.chatEntry{position:relative;display:grid;grid-template-columns:62px 162px minmax(225px,1fr) minmax(0,1.5fr) 26px;align-items:center;gap:16px;min-height:71px;padding:5px 12px 5px 6px;border-radius:19px}.chatAuthorAvatar{width:60px;height:60px;border-radius:8px;background:linear-gradient(#d5eaff,#b8d8ef);display:grid;place-items:center;overflow:hidden;color:#3a688c;font-size:17px;font-weight:750}.chatAuthorAvatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;min-width:100%;max-width:none;max-height:none;border:0;margin:0;padding:0;box-shadow:none}.chatAuthorMeta{grid-column:2;min-width:0;position:relative;font-size:20px;font-weight:750;line-height:1.15}.chatAuthorName{display:block;overflow-wrap:anywhere}.chatAuthorName a{color:#0034dc;text-decoration:underline}.chatAuthorMeta time{display:block;font-size:18px;color:var(--chat-muted);font-weight:400;margin-top:3px;font-variant-numeric:tabular-nums}.chatAuthorDetails{display:none;position:absolute;z-index:8;top:100%;left:0;max-width:240px;background:white;border:1px solid var(--chat-border);border-radius:8px;padding:8px;box-shadow:0 4px 15px #21486a20;font-size:13px;font-weight:400;white-space:normal}.chatAuthorDetails:empty{display:none!important}.chatAuthorMeta:hover .chatAuthorDetails,.chatAuthorMeta:focus-within .chatAuthorDetails{display:block}.chatBubble{grid-column:3;justify-self:start;display:flex;align-items:center;gap:28px;max-width:100%;min-height:52px;padding:10px 18px;border:1px solid #d0e0f1;border-radius:22px;background:linear-gradient(#f7faff,#e1edf5);box-shadow:0 2px 3px #2a5c8a24;white-space:normal}.chatBubble>strong{font-size:23px;line-height:1.15;letter-spacing:-.6px;overflow-wrap:anywhere;min-width:0}.chatVerdict{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;color:white;background:linear-gradient(#75c833,#35a400);box-shadow:inset 0 0 0 1px #55a518;font-size:23px;font-weight:bold}.cityChainError{background:linear-gradient(100deg,#fff0f3,#ffedf2);min-height:77px;margin:6px 0}.cityChainError .chatBubble{background:linear-gradient(#fff3f6,#f8d9e3);border-color:#f0cbd5}.cityChainError .chatBubble>strong{text-decoration:line-through}.cityChainError .chatVerdict{background:#ec0036;box-shadow:none;font-size:0}.chatVerdict::after{content:"";display:block;width:100%;height:100%;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%2012l4%204%208-8%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}.cityChainError .chatVerdict::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%208l8%208M16%208l-8%208%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.chatEmpty{min-height:350px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--chat-muted);text-align:center;padding:25px}.chatEmpty .chatIcon{width:42px;height:42px}.chatComposer{--chat-control-font-size:17px;display:flex;gap:12px;margin:10px 4px 0;min-height:59px}.chatInputWrap{display:flex;align-items:center;gap:14px;flex:1;min-width:0;border:1.5px solid #9cbce7;border-radius:17px;background:#ffffffed;padding:0 16px;box-shadow:inset 0 1px 3px #2568a00a}.chatInputWrap .chatIcon{width:34px;height:34px}.chatInputWrap input{width:100%;min-width:0;flex:1;border:0!important;outline:none;box-shadow:none!important;background:transparent!important;font-size:var(--chat-control-font-size)!important;color:var(--chat-ink)!important;padding:14px 0!important}.chatInputWrap input::placeholder{color:#455b88;opacity:1}.chatInputWrap:focus-within{border-color:#4587bd}.chatCharacterCount{font-size:16px;white-space:nowrap;color:#263f75;font-variant-numeric:tabular-nums}.chatCharacterCount.isOverLimit{color:#bd002b}.chatButton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 14px;border:1px solid #006cac;border-radius:10px;background:linear-gradient(155deg,#258ac3,#005198);color:white!important;box-shadow:inset 0 1px 1px #ffffff30;font-weight:650;cursor:pointer;white-space:nowrap;text-decoration:none!important}.chatButton:hover{background:linear-gradient(#157ab5,#004983)}.chatButton:disabled,.chatEitherOption:disabled{filter:grayscale(1);opacity:.55;cursor:not-allowed}.chatComposer>.chatButton{flex:0 0 78px;min-height:59px;border-radius:17px;padding:10px}.chatComposer>.chatButton .chatIcon{width:34px;height:34px}.chatInputHint{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.chatNotice{font-size:13px;line-height:1.4;color:#8b283c;margin:7px 4px 0!important}.chatNotice:empty{display:none}.chatGuest{padding:15px;background:#eaf4ff;border-radius:14px;font-size:16px;margin:10px 4px 0!important}
.chatHistory>summary,.chatInfo>summary{padding:14px 23px 12px}.chatHistory .chatDisclosureBody,.chatInfo .chatDisclosureBody{padding:0 16px 17px}.chatHistoryList{list-style:none;padding:0!important;max-height:420px;overflow:auto;font-size:18px;line-height:1.2}.chatHistoryList li{display:flex;align-items:center;gap:22px;min-height:32px;padding:5px 18px;border-radius:10px;overflow-wrap:anywhere}.chatHistoryList li:nth-child(odd){background:#e8f1f9}.chatHistoryList:not(.chatMostUsedList,.anagramHistory) li:last-child{background:linear-gradient(90deg,#d9efff,#c9e5fd);font-weight:bold}.chatHistoryList li.chatHistoryError{color:#8d2c42;text-decoration:line-through}.chatHistoryPin{width:15px;height:20px;flex-shrink:0;background:#1272aa;clip-path:polygon(50% 100%,9% 43%,0 28%,5% 13%,25% 0,75% 0,95% 13%,100% 28%,91% 43%);position:relative}.chatHistoryPin::after{content:'';position:absolute;top:4px;left:5px;width:5px;height:5px;background:#edf7ff;border-radius:50%}.chatHistoryToggle{display:block;border:0;background:none;color:#0035dc;text-decoration:underline;padding:10px 13px 0;font-size:17px!important;text-align:left}.chatHistoryEmpty{padding:12px;color:var(--chat-muted);font-size:14px}.chatHistoryCount{font-weight:400}.chatScoreList{padding:0!important;list-style:none;counter-reset:chatRank;border:1px solid #e4edf6;border-radius:17px;overflow:hidden}.chatScoreList li{display:flex;align-items:center;gap:23px;min-height:39px;padding:3px 13px;border-bottom:1px solid #d3e1ef;counter-increment:chatRank;font-size:18px}.chatScoreList li:last-child{border-bottom:0}.chatScoreList li::before{content:counter(chatRank);width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#fff,#dfebf8);font-size:22px;font-weight:bold}.chatScoreList li:nth-child(1)::before{background:linear-gradient(#fff2b5,#ffbb24);color:#382500}.chatScoreList li:nth-child(2)::before{background:linear-gradient(#fff,#aeb5bf)}.chatScoreList li:nth-child(3)::before{background:linear-gradient(#ffd8b4,#cb6e32)}.chatScoreList li>span{min-width:0;overflow-wrap:anywhere}.chatScoreList strong{margin-left:auto;font-size:21px}.chatInfo dl,.chatInfo .chatDisclosureBody>p:last-child{display:none}.chatInfo #cityChainScoresEmpty{font-size:15px;padding:10px}.chatInfo>summary>.chatIcon:first-child{color:#0074b0}
.chatReport{grid-column:5;position:relative;justify-self:end;align-self:center}.chatGame .chatReport>summary{font-size:31px;line-height:1;padding:0 4px;display:block;list-style:none;color:#080f37;font-weight:bold}.chatReportPanel{position:fixed;z-index:40;top:30%;right:24px;width:332px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:12px;border:1px solid #c6d9ea;border-radius:17px;background:linear-gradient(120deg,#fff,#f8fcff);box-shadow:0 3px 9px #1a3f6a3b;font-size:15px;font-weight:400}.chatReportHeading{display:flex;align-items:center;justify-content:space-between;padding:0 7px 11px;border-bottom:1px solid #dfe9f4;font-size:19px;font-weight:800}.chatReportHeading button{border:0;background:none;font-size:25px;line-height:1;padding:0 2px}.chatReportPanel>p{padding:8px 6px 6px;font-size:14px}.chatReportPanel fieldset{margin:0;padding:0;border:0;min-width:0}.chatReportPanel label{display:flex;align-items:center;gap:17px;padding:5px 10px;border-radius:10px;font-size:14px;line-height:1.15;cursor:pointer}.chatReportPanel label:has(input:checked){background:#e0f0ff}.chatReportPanel input[type=radio]{appearance:auto;width:21px;height:21px;margin:0;flex:0 0 21px;accent-color:#0059eb}.chatReportActions{display:flex;gap:7px;justify-content:flex-end;padding-top:8px}.chatReportActions>button{font-size:14px;padding:8px 11px;min-height:36px}.chatReportActions>button:first-child{border:1px solid #cfdeef;border-radius:10px;background:linear-gradient(#fff,#dae9f6);color:#080f37;box-shadow:0 2px 3px #24496a16}.chatReportPanel>[role=status]{display:block;font-size:12px;color:#922338;margin-top:6px}.chatReportPanel>[role=status]:empty{display:none}.chatReportToast{position:absolute;top:127px;right:273px;z-index:45;display:flex;align-items:center;gap:15px;padding:10px 17px;min-width:373px;border-radius:17px;border:1px solid #d6f0c4;background:linear-gradient(110deg,#f6fff0,#e8ffe6);box-shadow:0 3px 9px #3a683b35;font-size:14px;color:#061208}.chatToastCheck{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(#6ac821,#32a400);color:white;font-size:25px}.chatReportToast strong{display:block;font-size:16px;margin-bottom:3px}.chatReportToast button{margin-left:auto;align-self:flex-start;border:0;background:none;font-size:23px;line-height:1;color:#183b18}
/* chat-home-shared:start */
.chatStandalone{margin:0;background:radial-gradient(ellipse at 50% 50%,#fff 10%,#e7f3ff 100%);font-family:Arial,'Segoe UI',sans-serif}.chatStandaloneNav{box-sizing:border-box;height:64px;padding:10px max(29px,calc((100vw - 1688px)/2));display:flex;align-items:center;gap:22px;background:linear-gradient(110deg,#255479,#153d5d);color:white}.chatStandaloneNav a{color:white;text-decoration:none;font-size:16px}.chatStandaloneBrand{border:2px solid white;border-radius:6px;padding:4px;font-size:21px!important;font-weight:bold}.chatStandalone main{padding:0 29px}
/* chat-home-shared:end */
/* Chess is isolated from chat composition and has no additional profile/presence polling. */
.chatGame .chessApp{display:grid;grid-template-columns:minmax(240px, .65fr) minmax(0,1.35fr);gap:22px;align-items:start;padding:0 22px 30px;color:#0c163e}
.chatGame .chessApp h2{font-size:24px;margin:0 0 14px}
.chatGame .chessLobby{display:grid;gap:18px;min-width:0}
.chatGame .chessLobbyCard,.chatGame .chessPlay{padding:24px;min-width:0}
.chatGame .chessCreate{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:20px 0}
.chatGame .chessCreate label,.chatGame .chessToolbar label{display:flex;gap:6px;flex-direction:column}
.chatGame .chessApp select{min-height:38px;border:1px solid #beccec;border-radius:9px;background:#fff;color:#14224f;padding:7px}
.chatGame .chessApp button{cursor:pointer}
.chatGame .chessApp button:disabled{cursor:default}
.chatGame .chessMatchList{display:grid;gap:10px;margin:18px 0}
.chatGame .chessMatch{width:100%;text-align:left;border:1px solid #c7d5ee;border-radius:13px;padding:13px;background:#edf3ff;color:#101d49;overflow-wrap:anywhere}
.chatGame .chessMatch small{display:block;margin-top:5px;color:#506087}
.chatGame .chessMatch[aria-current]{border-color:#6461dd;box-shadow:inset 0 0 0 1px #6461dd}
.chatGame .chessMatch:focus-visible{outline:3px solid #e4a731;outline-offset:-4px}
.chatGame .chessRules{margin-top:22px;font-size:14px;line-height:1.6}
.chatGame .chessRules summary{font-weight:700;cursor:pointer}
.chatGame .chessBoard{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;max-width:640px;margin:18px auto;border:5px solid #664834;border-radius:8px;overflow:hidden;aspect-ratio:1}
.chatGame .chessBoard:empty{display:none}
.chatGame button.chessSquare{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;font:clamp(25px,4.5cqw,62px)/1 'DejaVu Sans','Segoe UI Symbol','Apple Symbols',serif;box-shadow:none;opacity:1}
.chatGame .chessSquare.chessLight{background:#f0d9b5}
.chatGame .chessSquare.chessDark{background:#b58863}
.chatGame .chessPiece{display:block;width:88%;height:88%;pointer-events:none;stroke-linecap:round;stroke-linejoin:round}
.chatGame .chessPieceBody{fill:#1c1714;stroke:#1c1714;stroke-width:2}
.chatGame .chessPieceDetail{fill:none;stroke:#fff7e9;stroke-width:1.4}
.chatGame .chessWhitePiece .chessPieceBody{fill:#fffdf8}
.chatGame .chessWhitePiece .chessPieceDetail{stroke:#1c1714}
.chatGame .chessSquare.chessSelected{background:#c8bd65}
.chatGame .chessSquare.chessTarget{box-shadow:inset 0 0 0 5px #53b952}
.chatGame .chessSquare:focus-visible{outline:3px solid #e0800b;outline-offset:-3px;z-index:1}
.chatGame .chessFile,.chatGame .chessRank{position:absolute;font:600 11px/1 sans-serif;color:#2c1c12;text-shadow:none}
.chatGame .chessFile{bottom:3px;right:4px}.chatGame .chessRank{top:3px;left:4px}
.chatGame .chessToolbar,.chatGame .chessActions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px}
.chatGame :is(.chessActions,.chessToolbar)[hidden]{display:none}
.chatGame .chessToolbar [data-chess="export"]:is([hidden],:disabled){display:none}
.chatGame .chessToolbar button,.chatGame .chessActions button{font-size:14px;padding:9px 12px;background:#edf2ff;color:#142351;border:1px solid #c2cfee;border-radius:9px}
.chatGame .chessApp button:disabled:not(.chessSquare){opacity:.48}
.chatGame .chessMessage{white-space:pre-wrap;overflow-wrap:anywhere;color:#3e5080;min-height:22px;margin-top:18px!important;padding:12px 14px;border:1px solid #d6e0f3;border-radius:12px;background:#eef3fa;font-size:14px;line-height:1.5}
.chatGame :is(.chessMessage,.battleMessage,.sudokuMessage,.tttMessage):not(:empty)::before{content:"Status";display:block;font-weight:700;font-size:12px;color:var(--chat-muted);margin-bottom:4px}
.chatGame .chessMessageError{color:#9b2345;border-color:#efcbd5;background:#fff4f6}
.chatGame .chessStatus{min-height:28px;color:#3e5080;font-weight:600}
.chatGame .chessMoves{max-height:200px;overflow:auto;columns:2;margin:15px 0 0;padding-left:28px;font-variant-numeric:tabular-nums}

@media(max-width:1490px) and (min-width:981px){.chatGame{font-size:16px}.chatLayout{grid-template-columns:minmax(210px,1fr) minmax(440px,2.3fr) minmax(220px,.95fr)}.chatHero h1{font-size:38px}.chatHero p{font-size:18px}.chatCard>summary{padding:18px 17px 12px}.chatDisclosureBody{padding:0 17px 17px}.chatSteps li{font-size:15px;gap:12px}.chatRules{min-height:350px}.chatParticipants{padding:20px 17px}.chatPlayer{width:35px;height:35px;flex-basis:35px;font-size:12px}.chatPlayerList{gap:3px}.chatState{gap:10px;padding:15px 12px;min-height:92px}.chatCurrent{padding:10px;gap:8px}.chatPinBadge{flex-basis:40px;height:40px}.chatCurrentText>strong{font-size:25px}.chatCurrentText>span,.chatLetterWrap{font-size:13px}.chatLetterWrap{padding-left:12px;gap:8px}.chatLetterWrap strong{width:40px;height:42px;font-size:27px}.chatCount{flex-basis:150px;font-size:15px;gap:7px}.chatCount .chatIcon{width:27px;height:27px}.chatEntry{grid-template-columns:48px 118px minmax(130px,1fr) 22px;gap:10px;min-height:73px}.chatAuthorAvatar{width:46px;height:46px}.chatAuthorMeta{font-size:16px}.chatAuthorMeta time{font-size:14px}.chatBubble{padding:10px 13px;gap:16px;min-height:46px}.chatBubble>strong{font-size:19px}.chatVerdict{width:24px;height:24px;font-size:20px}.chatReport{grid-column:4}.chatHistoryList,.chatScoreList li{font-size:15px}.chatScoreList li{gap:9px;padding-inline:8px}.chatScoreList strong{font-size:18px}.chatHistoryToggle{font-size:14px!important;padding-inline:2px}.chatHistoryList li{gap:12px;padding-inline:10px}.chatReportToast{right:150px}}
@media(max-width:980px){.chatHero{height:145px;padding:24px 12px;gap:14px}.chatHero h1{font-size:32px}.chatHero p{font-size:17px;max-width:570px}.chatLayout{grid-template-columns:1fr;grid-template-areas:'state' 'rules' 'chat' 'info' 'history' 'participants';gap:12px;padding:16px;border:1px solid var(--chat-border);border-radius:25px;background:#ffffffba}.chatLeft,.chatRight,.chatCenter{display:contents}.chatState{grid-area:state;padding:0;min-height:80px;gap:12px}.chatCurrent{padding:12px;gap:10px}.chatLetterWrap{padding-left:15px}.chatCount{flex-basis:170px;font-size:16px}.chatRules{grid-area:rules;min-height:0}.chatConversation{grid-area:chat;border:1px solid var(--chat-border);border-radius:20px;padding:8px 10px 12px;background:#ffffffc9}.chatInfo{grid-area:info}.chatHistory{grid-area:history}.chatParticipants{grid-area:participants;min-height:0;padding:18px}.chatCard>summary{padding:13px 18px}.chatDisclosureBody{padding:5px 20px 18px}.chatSteps li{font-size:16px;gap:14px}.chatMessages{height:460px}.chatEntry{grid-template-columns:56px 140px minmax(130px,1fr) 24px;gap:12px;min-height:78px;padding:6px}.chatAuthorAvatar{width:54px;height:54px}.chatAuthorMeta{font-size:18px}.chatAuthorMeta time{font-size:16px}.chatBubble{gap:18px}.chatBubble>strong{font-size:22px}.chatReport{grid-column:4}.chatReportToast{position:fixed;top:12px;right:12px;left:auto;min-width:0;max-width:calc(100vw - 24px)}.chatGame .chessApp{grid-template-columns:minmax(0,1fr);padding:0 8px 16px;gap:14px}.chatGame .chessLobbyCard,.chatGame .chessPlay{padding:16px}.chatGame .chessMatchList{max-height:220px;overflow:auto}.chatGame button.chessSquare{font-size:clamp(22px,8cqw,58px)}.chatGame .chessMoves{columns:1}.chatGame :is(.chessApp,.battleApp,.sudokuApp,.tttApp){--mini-columns:1fr;--mini-play-row:1;--mini-card-padding:20px}.chatGame:not(.chatAppActive) :is(.chessLobby,.battleLobby,.sudokuLobby,.tttLobby):has(>.gameLobbyRules){display:contents}.chatGame:not(.chatAppActive) :is(.chessLobby,.battleLobby,.sudokuLobby,.tttLobby)>.gameLobbyRules{grid-area:1/1}.chatGame:not(.chatAppActive) :is(.chessApp,.battleApp,.sudokuApp,.tttApp):has(.gameLobbyRules){--mini-play-row:2}.chatGame:not(.chatAppActive) :is(.unknownApp,.slfApp):has(.gameLobbyRules){grid-template-columns:minmax(0,1fr)}.chatStandalone main{padding:0 12px}.chatGame:not(.chatAppActive) .unknownApp:has(.gameLobbyRules)>.unknownRight{grid-column:1}.chatGame:not(.chatAppActive) :is(.unknownLobby,.slfLobby):has(>.gameLobbyRules){display:contents}.chatGame:not(.chatAppActive) :is(.unknownLobby,.slfLobby)>.gameLobbyRules{grid-area:1/1}.chatGame:not(.chatAppActive) :is(.unknownApp,.slfApp):has(.gameLobbyRules) > :is(.unknownPlay,.slfPlay){grid-row:2}.chatGame .chatHero:has(.chatGamePicker){padding-top:52px}}
@media(max-width:600px){.chatGame{font-size:14px;margin-bottom:16px}.chatHero{height:133px;padding:25px 6px 20px;gap:10px;background-size:auto 75%;background-position:right bottom}.chatHero h1{font-size:clamp(19px,5.2vw,29px);letter-spacing:-.65px}.chatHero p{font-size:13px;line-height:1.3;margin-top:5px}.chatGamePicker{right:2px;top:3px;font-size:10px}.chatGamePicker summary{padding:3px 6px}.chatLayout{padding:10px;gap:10px;border-radius:20px}.chatState{min-height:66px;gap:7px}.chatCurrent{padding:9px;gap:7px;border-radius:14px}.chatPinBadge{flex-basis:32px;height:32px}.chatPinBadge .chatIcon{width:23px;height:26px}.chatCurrentText>span{font-size:10px}.chatCurrentText>strong{font-size:21px}.chatLetterWrap{padding-left:7px;gap:6px;font-size:10px}.chatLetterWrap>span{display:none}.chatLetterWrap strong{width:32px;height:35px;border-radius:11px;font-size:24px}.chatCount{flex-basis:85px;white-space:normal;gap:4px;padding:6px;font-size:11px;border-radius:14px}.chatCount .chatIcon{width:22px;height:22px}.chatCard{border-radius:16px}.chatCard>summary{padding:12px}.chatGame :is(.chatCard>summary,.chatCard>h2:has(>.chatBoxToggle),aside>.chatCard>h2,.gameSchedule.chatCard>h2){--chat-box-title-size:17px;--chat-box-title-gap:10px}.chatDisclosureBody{padding:4px 12px 14px}.chatSteps li{font-size:14px;gap:11px}.chatSteps li>span{width:24px;height:24px;flex-basis:24px;font-size:18px}.chatConversation{padding:7px 5px 10px;border-radius:17px}.chatMessages{height:430px;scroll-behavior:auto}.chatEntry{grid-template-columns:38px minmax(76px,.9fr) minmax(100px,1.2fr) 17px;gap:6px;padding:8px 3px;min-height:70px;border-radius:13px}.chatAuthorAvatar{width:36px;height:36px;font-size:12px}.chatAuthorMeta{font-size:12px}.chatAuthorMeta time{font-size:11px;margin-top:3px}.chatBubble{padding:9px 10px;gap:10px;border-radius:17px;min-height:40px}.chatBubble>strong{font-size:15px;letter-spacing:-.25px}.chatVerdict{width:19px;height:19px;font-size:16px}.cityChainError .chatVerdict::after{font-size:21px}.chatGame .chatReport>summary{font-size:26px;padding:0 2px}.chatComposer{--chat-control-font-size:16px;gap:7px;margin:8px 3px 0;min-height:49px}.chatInputWrap{padding:0 9px;gap:7px;border-radius:14px}.chatInputWrap .chatIcon{width:25px;height:25px}.chatInputWrap input{padding:11px 0!important}.chatCharacterCount{font-size:10px}.chatComposer>.chatButton{flex-basis:48px;min-height:49px;padding:8px;border-radius:14px}.chatComposer>.chatButton .chatIcon{width:28px;height:28px}.chatParticipants{padding:16px;min-height:150px}.chatParticipantLabel{font-size:15px;margin-top:12px!important}.chatPlayerList{margin-top:14px;gap:5px}.chatPlayer{width:36px;height:36px;flex-basis:36px;font-size:12px}.chatPlayerMore{font-size:17px}.chatHistoryList{font-size:15px}.chatHistoryList li{gap:15px;padding-inline:12px}.chatHistoryToggle{font-size:14px!important}.chatScoreList li{font-size:16px}.chatGuest{font-size:14px}.chatReportToast{font-size:12px;gap:9px;padding:10px}.chatReportToast strong{font-size:14px}.chatToastCheck{width:29px;height:29px;flex-shrink:0}.chatReportPanel{font-size:14px}.chatReportPanel label{font-size:13px}.chatGame :is(.chessApp,.battleApp,.sudokuApp,.tttApp){--mini-card-padding:16px;--mini-gap:14px}.chatGame .hmKeyboard{--hm-key-columns:6}.chatStandalone main{padding:0 6px}.chatStandaloneNav{height:55px;padding:9px 13px}}
@media(max-width:370px){.chatPinBadge{display:none}.chatCurrentText>strong{font-size:19px}.chatCount{flex-basis:78px}.chatEntry{grid-template-columns:31px minmax(64px,.85fr) minmax(91px,1.2fr) 16px;gap:5px}.chatAuthorAvatar{width:30px;height:30px}.chatAuthorMeta{font-size:11px}.chatBubble{padding:8px;gap:6px}.chatBubble>strong{font-size:13px}.chatPlayer{width:31px;height:31px;flex-basis:31px}.chatInputWrap .chatIcon{width:22px;height:22px}.chatCharacterCount{font-size:9px}.chatGame .sudokuDigits{--sudoku-digit-columns:3}.chatGame .hmKeyboard{--hm-key-columns:5}}
@media(prefers-reduced-motion:reduce){.chatMessages{scroll-behavior:auto}}
.chatTheme-names .chatHero{background-image:url('images/chat-names.svg?v=ideas-1')}.chatTheme-plain .chatHero{background-image:none}

.chatParticipants .chatIcon circle,.chatCount .chatIcon circle{fill:currentColor}

/* Fixed choices, no text entry, for Date or Next. */
.chatDateChoices{display:flex;gap:14px;flex:1;min-width:0}.chatDateChoices>:is(.chatButton,.chatDateWait){flex:1;min-height:59px;font-size:var(--chat-control-font-size);border-radius:17px}.chatDateChoices .chatDate{background:linear-gradient(145deg,#e66391,#b92966);border-color:#bd3b73}.chatDateChoices .chatNext{background:linear-gradient(145deg,#3696c5,#05609a)}.chatChoiceHint{font-size:14px;color:var(--chat-muted);padding:10px 6px 0;overflow-wrap:anywhere}
@media(max-width:600px){.chatDateChoices{gap:9px}.chatDateChoices>:is(.chatButton,.chatDateWait){min-height:50px}.chatChoiceHint{font-size:12px}}

@media(max-width:600px){.chatTheme-names .chatHero{background-size:auto 36%;background-position:right bottom}}

/* Five-word prompts use the existing letter area with room for all five letters. */
.chatRule-five .chatCurrent{flex-wrap:wrap}.chatRule-five .chatCurrentText>strong{font-size:20px}
.chatRule-five .chatLetterWrap{flex-basis:100%;border-left:0;padding-left:0;gap:12px;flex-wrap:wrap}
.chatRule-five .chatLetterWrap strong{width:auto;min-width:130px;padding:8px 12px;letter-spacing:.18em;font-size:25px}

.chatRule-five .chatLetterWrap strong{max-width:100%;overflow-wrap:anywhere;white-space:normal}

/* Match the available WCF content width, which may be smaller than the viewport. */
@container chat-game (max-width:1490px) and (min-width:981px){.chatLayout{grid-template-columns:minmax(210px,1fr) minmax(440px,2.3fr) minmax(220px,.95fr)}.chatHero h1{font-size:38px}.chatHero p{font-size:18px}.chatCard>summary{padding:18px 17px 12px}.chatDisclosureBody{padding:0 17px 17px}.chatSteps li{font-size:15px;gap:12px}.chatRules{min-height:350px}.chatParticipants{padding:20px 17px}.chatPlayer{width:35px;height:35px;flex-basis:35px;font-size:12px}.chatPlayerList{gap:3px}.chatState{gap:10px;padding:15px 12px;min-height:92px}.chatCurrent{padding:10px;gap:8px}.chatPinBadge{flex-basis:40px;height:40px}.chatCurrentText>strong{font-size:25px}.chatCurrentText>span,.chatLetterWrap{font-size:13px}.chatLetterWrap{padding-left:12px;gap:8px}.chatLetterWrap strong{width:40px;height:42px;font-size:27px}.chatCount{flex-basis:150px;font-size:15px;gap:7px}.chatCount .chatIcon{width:27px;height:27px}.chatEntry{grid-template-columns:48px 118px minmax(130px,1fr) 22px;gap:10px;min-height:73px}.chatAuthorAvatar{width:46px;height:46px}.chatAuthorMeta{font-size:16px}.chatAuthorMeta time{font-size:14px}.chatBubble{padding:10px 13px;gap:16px;min-height:46px}.chatBubble>strong{font-size:19px}.chatVerdict{width:24px;height:24px;font-size:20px}.chatReport{grid-column:4}.chatHistoryList,.chatScoreList li{font-size:15px}.chatScoreList li{gap:9px;padding-inline:8px}.chatScoreList strong{font-size:18px}.chatHistoryToggle{font-size:14px!important;padding-inline:2px}.chatHistoryList li{gap:12px;padding-inline:10px}.chatReportToast{right:150px}}
@container chat-game (max-width:980px){.chatHero{height:145px;padding:24px 12px;gap:14px}.chatHero h1{font-size:32px}.chatHero p{font-size:17px;max-width:570px}.chatLayout{grid-template-columns:1fr;grid-template-areas:'state' 'rules' 'chat' 'info' 'history' 'participants';gap:12px;padding:16px;border:1px solid var(--chat-border);border-radius:25px;background:#ffffffba}.chatLeft,.chatRight,.chatCenter{display:contents}.chatState{grid-area:state;padding:0;min-height:80px;gap:12px}.chatCurrent{padding:12px;gap:10px}.chatLetterWrap{padding-left:15px}.chatCount{flex-basis:170px;font-size:16px}.chatRules{grid-area:rules;min-height:0}.chatConversation{grid-area:chat;border:1px solid var(--chat-border);border-radius:20px;padding:8px 10px 12px;background:#ffffffc9}.chatInfo{grid-area:info}.chatHistory{grid-area:history}.chatParticipants{grid-area:participants;min-height:0;padding:18px}.chatCard>summary{padding:13px 18px}.chatDisclosureBody{padding:5px 20px 18px}.chatSteps li{font-size:16px;gap:14px}.chatMessages{height:460px}.chatEntry{grid-template-columns:56px 140px minmax(130px,1fr) 24px;gap:12px;min-height:78px;padding:6px}.chatAuthorAvatar{width:54px;height:54px}.chatAuthorMeta{font-size:18px}.chatAuthorMeta time{font-size:16px}.chatBubble{gap:18px}.chatBubble>strong{font-size:22px}.chatReport{grid-column:4}.chatReportToast{position:fixed;top:12px;right:12px;left:auto;min-width:0;max-width:calc(100vw - 24px)}.chatGame .chessApp{grid-template-columns:minmax(0,1fr);padding:0 8px 16px;gap:14px}.chatGame .chessLobbyCard,.chatGame .chessPlay{padding:16px}.chatGame .chessMatchList{max-height:220px;overflow:auto}.chatGame button.chessSquare{font-size:clamp(22px,8cqw,58px)}.chatGame .chessMoves{columns:1}.chatGame :is(.chessApp,.battleApp,.sudokuApp,.tttApp){--mini-columns:1fr;--mini-play-row:1;--mini-card-padding:20px}.chatGame:not(.chatAppActive) :is(.chessLobby,.battleLobby,.sudokuLobby,.tttLobby):has(>.gameLobbyRules){display:contents}.chatGame:not(.chatAppActive) :is(.chessLobby,.battleLobby,.sudokuLobby,.tttLobby)>.gameLobbyRules{grid-area:1/1}.chatGame:not(.chatAppActive) :is(.chessApp,.battleApp,.sudokuApp,.tttApp):has(.gameLobbyRules){--mini-play-row:2}.chatGame:not(.chatAppActive) :is(.unknownApp,.slfApp):has(.gameLobbyRules){grid-template-columns:minmax(0,1fr)}.chatGame:not(.chatAppActive) .unknownApp:has(.gameLobbyRules)>.unknownRight{grid-column:1}.chatGame:not(.chatAppActive) :is(.unknownLobby,.slfLobby):has(>.gameLobbyRules){display:contents}.chatGame:not(.chatAppActive) :is(.unknownLobby,.slfLobby)>.gameLobbyRules{grid-area:1/1}.chatGame:not(.chatAppActive) :is(.unknownApp,.slfApp):has(.gameLobbyRules) > :is(.unknownPlay,.slfPlay){grid-row:2}.chatGame .chatHero:has(.chatGamePicker){padding-top:52px}}
@container chat-game (max-width:600px){.chatHero{height:133px;padding:25px 6px 20px;gap:10px;background-size:auto 75%;background-position:right bottom}.chatHero h1{font-size:clamp(19px,5.2vw,29px);letter-spacing:-.65px}.chatHero p{font-size:13px;line-height:1.3;margin-top:5px}.chatGamePicker{right:2px;top:3px;font-size:10px}.chatGamePicker summary{padding:3px 6px}.chatLayout{padding:10px;gap:10px;border-radius:20px}.chatState{min-height:66px;gap:7px}.chatCurrent{padding:9px;gap:7px;border-radius:14px}.chatPinBadge{flex-basis:32px;height:32px}.chatPinBadge .chatIcon{width:23px;height:26px}.chatCurrentText>span{font-size:10px}.chatCurrentText>strong{font-size:21px}.chatLetterWrap{padding-left:7px;gap:6px;font-size:10px}.chatLetterWrap>span{display:none}.chatLetterWrap strong{width:32px;height:35px;border-radius:11px;font-size:24px}.chatCount{flex-basis:85px;white-space:normal;gap:4px;padding:6px;font-size:11px;border-radius:14px}.chatCount .chatIcon{width:22px;height:22px}.chatCard{border-radius:16px}.chatCard>summary{padding:12px}.chatGame :is(.chatCard>summary,.chatCard>h2:has(>.chatBoxToggle),aside>.chatCard>h2,.gameSchedule.chatCard>h2){--chat-box-title-size:17px;--chat-box-title-gap:10px}.chatDisclosureBody{padding:4px 12px 14px}.chatSteps li{font-size:14px;gap:11px}.chatSteps li>span{width:24px;height:24px;flex-basis:24px;font-size:18px}.chatConversation{padding:7px 5px 10px;border-radius:17px}.chatMessages{height:430px;scroll-behavior:auto}.chatEntry{grid-template-columns:38px minmax(76px,.9fr) minmax(100px,1.2fr) 17px;gap:6px;padding:8px 3px;min-height:70px;border-radius:13px}.chatAuthorAvatar{width:36px;height:36px;font-size:12px}.chatAuthorMeta{font-size:12px}.chatAuthorMeta time{font-size:11px;margin-top:3px}.chatBubble{padding:9px 10px;gap:10px;border-radius:17px;min-height:40px}.chatBubble>strong{font-size:15px;letter-spacing:-.25px}.chatVerdict{width:19px;height:19px;font-size:16px}.cityChainError .chatVerdict::after{font-size:21px}.chatGame .chatReport>summary{font-size:26px;padding:0 2px}.chatComposer{--chat-control-font-size:16px;gap:7px;margin:8px 3px 0;min-height:49px}.chatInputWrap{padding:0 9px;gap:7px;border-radius:14px}.chatInputWrap .chatIcon{width:25px;height:25px}.chatInputWrap input{padding:11px 0!important}.chatCharacterCount{font-size:10px}.chatComposer>.chatButton{flex-basis:48px;min-height:49px;padding:8px;border-radius:14px}.chatComposer>.chatButton .chatIcon{width:28px;height:28px}.chatParticipants{padding:16px;min-height:150px}.chatParticipantLabel{font-size:15px;margin-top:12px!important}.chatPlayerList{margin-top:14px;gap:5px}.chatPlayer{width:36px;height:36px;flex-basis:36px;font-size:12px}.chatPlayerMore{font-size:17px}.chatHistoryList{font-size:15px}.chatHistoryList li{gap:15px;padding-inline:12px}.chatHistoryToggle{font-size:14px!important}.chatScoreList li{font-size:16px}.chatGuest{font-size:14px}.chatReportToast{font-size:12px;gap:9px;padding:10px}.chatReportToast strong{font-size:14px}.chatToastCheck{width:29px;height:29px;flex-shrink:0}.chatReportPanel{font-size:14px}.chatReportPanel label{font-size:13px}.chatGame :is(.chessApp,.battleApp,.sudokuApp,.tttApp){--mini-card-padding:16px;--mini-gap:14px}.chatGame .hmKeyboard{--hm-key-columns:6}}
@container chat-game (max-width:370px){.chatPinBadge{display:none}.chatCurrentText>strong{font-size:19px}.chatCount{flex-basis:78px}.chatEntry{grid-template-columns:31px minmax(64px,.85fr) minmax(91px,1.2fr) 16px;gap:5px}.chatAuthorAvatar{width:30px;height:30px}.chatAuthorMeta{font-size:11px}.chatBubble{padding:8px;gap:6px}.chatBubble>strong{font-size:13px}.chatPlayer{width:31px;height:31px;flex-basis:31px}.chatInputWrap .chatIcon{width:22px;height:22px}.chatCharacterCount{font-size:9px}.chatGame .sudokuDigits{--sudoku-digit-columns:3}.chatGame .hmKeyboard{--hm-key-columns:5}}

/* Compact message rows according to the center column, not the overall browser width. */
@container chat-conversation (max-width:700px){
.chatEntry{grid-template-columns:48px minmax(90px,118px) minmax(0,1fr) 22px;gap:10px;min-height:73px}
.chatAuthorAvatar{width:46px;height:46px}.chatAuthorMeta{font-size:16px}.chatAuthorMeta time{font-size:14px}
.chatBubble{padding:10px 13px;gap:12px;min-height:46px}.chatBubble>strong{font-size:19px}
.chatReport{grid-column:4}
}

/* Either/or: choose an answer, then submit it atomically with the next question. */
.chatGame .chatEitherComposer{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:18px;margin-top:12px;border:1px solid #c8dcf2;border-radius:20px;background:linear-gradient(135deg,#f3f9ff,#fff)}
.chatGame .chatEitherComposer[data-waiting-for-other="true"]{
 justify-content:center;padding:8px 12px;border-color:var(--chat-border);
 border-radius:12px;background:#edf0f2
}
.chatGame .chatEitherComposer[data-waiting-for-other="true"] .chatEitherFooter{
 justify-content:center;align-items:center;text-align:center
}
.chatGame .chatEitherComposer[data-waiting-for-other="true"] #chatEitherSummary{
 font-size:var(--chat-control-font-size);color:#536572;overflow-wrap:anywhere
}
.chatAppActive .chatEitherComposer[data-waiting-for-other="true"]{min-height:50px}
.chatGame .chatEitherStep{min-width:0;margin:0;padding:0;border:0}
.chatGame .chatEitherStep legend{font-size:16px;font-weight:700;margin-bottom:10px;padding:0;color:#101b47}
.chatEitherStep legend>span{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:7px;border-radius:50%;background:#dceeff;color:#0c659c;font-size:14px}
.chatGame #chatEitherQuestion{margin:0 0 8px;font-size:14px;color:#4b6085}
.chatEitherChoices,.chatEitherNew{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.chatEitherChoices>span,.chatEitherNew>span{font-size:13px;color:#59708e}
.chatGame .chatEitherOption{min-width:0;min-height:48px;white-space:normal;overflow-wrap:anywhere;padding:10px 14px;border:1px solid #a9c8e7;border-radius:14px;background:white;color:#113960;font-size:var(--chat-control-font-size);font-weight:700;cursor:pointer}
.chatGame .chatEitherOption[aria-pressed="true"]{border-color:#086cae;background:#0c6eac;color:white;box-shadow:0 0 0 3px #c6e5fc}
.chatGame .chatEitherOption:focus-visible{outline:3px solid #f6ae36;outline-offset:3px}
.chatGame .chatEitherOption:disabled{cursor:default;opacity:.65}
.chatEitherNew label{display:block;min-width:0;font-size:12px;font-weight:600;color:#466081}
.chatGame .chatEitherNew input{display:block;box-sizing:border-box;width:100%;min-width:0;margin-top:5px;padding:12px;border:1px solid #a9c8e7;border-radius:12px;background:#fff;color:#101b47;font-size:var(--chat-control-font-size)}
.chatEitherFooter{display:flex;align-items:center;justify-content:space-between;gap:14px}.chatEitherFooter>span{font-size:12px;line-height:1.4;color:#4b6085}.chatGame .chatEitherFooter .chatButton{margin-inline-start:auto;min-height:44px;flex-shrink:0;font-size:var(--chat-control-font-size);padding:10px 15px;gap:7px}.chatEitherFooter .chatIcon{width:23px;height:23px}
.chatGame .chatEitherBubble{display:flex;flex-wrap:wrap;gap:6px 12px;max-width:100%;border-radius:17px}.chatEitherBubble>strong{order:0}.chatEitherBubble>.chatVerdict{order:1}.chatEitherBubble>.chatSrOnly{order:2}
@container chat-game (max-width:600px){.chatGame .chatEitherComposer{padding:12px;gap:13px}.chatEitherNew{grid-template-columns:1fr;gap:5px}.chatEitherNew>span{text-align:center}.chatEitherChoices{gap:6px}.chatGame .chatEitherOption{padding:9px}.chatEitherFooter{flex-direction:column;align-items:stretch;gap:9px}.chatEitherFooter>span{text-align:center}.chatGame .chatEitherFooter .chatButton{margin-inline-start:0}.chatEitherStep legend{font-size:14px}}

.chatRule-either .chatMessages{height:340px}

.chatAuthorAvatar,.chatPlayer{padding:0;border:0}.chatAuthorAvatar:has(>img),.chatPlayer:has(>img){background:none}

.chatEitherBubble>.chatEitherPrevious{order:-1;flex-basis:100%;display:block;font-size:13px;font-weight:400;color:var(--chat-muted);overflow-wrap:anywhere}
.chatEitherQuestionCount{display:block}

/* Reference surface: blue/violet accents, compact rows and softly lit cards. */
/* chat-home-shared:start */
.chatGame{--chat-ink:#090e38;--chat-muted:#4e5686;--chat-blue:#5555da;--chat-border:#dbe4ff}
/* chat-home-shared:end */
/* chat-home-shared:start */
.chatGame::before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0 calc((100% - 100vw)/2) -36px;background:radial-gradient(ellipse at 90% 6%,#d6d3ff85,transparent 35%),radial-gradient(ellipse at 53% 96%,#cfe3ff99,transparent 66%),linear-gradient(120deg,#eff7ff,#f7f8ff 52%,#eaf2ff)}
/* chat-home-shared:end */
.chatHero{background-size:900px 180px}
.chatGame .chatCard{border-color:#dce5ff;background:linear-gradient(125deg,#ffffffed,#f6f8ffed);box-shadow:0 2px 4px #5565bb13,0 10px 24px #5267ae0b}
.chatGame .chatSteps li>span{background:linear-gradient(145deg,#a2dd7b,#46a541);box-shadow:inset 0 0 0 1px #5eb453;font-size:23px}
.chatGame .chatParticipants h2 .chatIcon,.chatGame .chatCount .chatIcon,.chatGame .chatHistory>summary>.chatIcon:first-child,.chatGame .chatInfo>summary>.chatIcon:first-child{color:#625ee2}
.chatGame .chatPinBadge{color:#6864ef;background:linear-gradient(140deg,#f1f3ff,#cad6ff);box-shadow:0 3px 5px #5367a72c}
.chatGame .chatCurrent,.chatGame .chatCount{background:linear-gradient(120deg,#eff3ff,#d5dff9)}
.chatGame .chatLetterWrap{border-color:#8387cf}
.chatGame .chatLetterWrap strong{background:linear-gradient(#fafbff,#d5dfff);border-color:#dce5ff;box-shadow:0 2px 4px #6673bf30}
.chatGame .chatAuthorAvatar{background:linear-gradient(145deg,#c4caec,#7d99d0);color:white}
.chatGame .chatAuthorName a{color:var(--chat-ink);text-decoration:none}
.chatGame .chatAuthorName a:hover{text-decoration:underline}
.chatGame .chatBubble{gap:14px;background:linear-gradient(#fff,#e7eef9);border-color:#d6dff5;box-shadow:0 2px 3px #4e62a626}
.chatGame .chatBubble>strong{font-weight:400;letter-spacing:-.45px}
.chatGame .chatVerdict{background:linear-gradient(140deg,#a5dd76,#4fae3e);box-shadow:inset 0 0 0 1px #62b64a}
.chatGame .cityChainError{background:linear-gradient(110deg,#fff0f3,#f7e6f1)}
.chatGame .cityChainError .chatBubble{background:linear-gradient(#fff8fa,#f8dfe9);border-color:#efccda}
.chatGame .cityChainError .chatBubble>strong{text-decoration:none}
.chatGame .cityChainError .chatVerdict{background:linear-gradient(#ff3355,#ed002b);box-shadow:inset 0 0 0 1px #e90b32}
.chatGame .chatHistoryList li{background:linear-gradient(90deg,#f8f9ff,#eaf0fb);border-radius:18px;margin-bottom:5px}
.chatGame .chatHistoryList:not(.chatMostUsedList,.anagramHistory) li:last-child{background:linear-gradient(100deg,#e4e5ff,#d3d0ff)}
.chatGame .chatHistoryPin{background:#7773c7}
.chatGame .chatScoreList{border-color:#d3dcff;background:linear-gradient(120deg,#fff,#f1f5ff);box-shadow:0 2px 3px #6179bb12}
.chatGame .chatScoreList li{border-color:#dde4f6}
.chatGame .chatInputWrap{border-color:#9aa9ee;box-shadow:inset 0 1px 3px #6b72a00b;background:#fff}
.chatGame .chatInputWrap input::placeholder{color:#4f527b}
.chatGame .chatComposer>.chatButton,.chatGame .chatEitherFooter>.chatButton{border-color:#6667dc;background:linear-gradient(145deg,#9295ff,#343bc7);box-shadow:inset 0 1px 1px #ffffff45,0 3px 7px #5557c421}
.chatGame .chatComposer>.chatButton:hover{background:linear-gradient(145deg,#777df5,#292eb4)}
.chatGame .chatButton:disabled,.chatGame .chatEitherOption:disabled{filter:grayscale(1);opacity:.55}
.chatGame .chatReportPanel{border-color:#d4ddf7;box-shadow:0 5px 20px #364b7840}
.chatGame .chatReportPanel input[type=radio]{accent-color:#5c5ce0}
/* chat-home-shared:start */
.chatStandalone{background:#eff5ff}
/* chat-home-shared:end */
/* chat-home-shared:start */
.chatStandaloneNav{height:60px;background:linear-gradient(110deg,#263f6b,#064a77)}
/* chat-home-shared:end */
/* chat-home-shared:start */
.chatStandalone main{padding:0 22px}
/* chat-home-shared:end */
@container chat-game (min-width:981px){
 .chatHero{height:180px;padding:28px 40px;gap:26px}
 .chatHero h1{font-size:38px;line-height:1.12}
 .chatHero p{font-size:18px;margin-top:7px}
 .chatLayout{grid-template-columns:minmax(210px,1fr) minmax(440px,2.22fr) minmax(220px,1fr);gap:18px}
 .chatLeft,.chatRight{gap:18px}
 .chatRight{padding-top:8px}
 .chatCard{border-radius:28px}
 .chatCard>summary{padding:22px 24px 12px}
 .chatDisclosureBody{padding:0 24px 20px}
 .chatSteps li{font-size:15px;line-height:1.36;gap:18px;margin-top:14px}
 .chatSteps li>span{flex-basis:28px;height:28px}
 .chatRules{min-height:394px}
 .chatParticipants{padding:24px;min-height:272px}
 .chatPlayerList{margin-top:24px;gap:8px}
 .chatPlayer{width:48px;height:48px;flex-basis:48px;font-size:18px}
 .chatState{height:112px;min-height:112px;padding:13px 14px 19px;gap:12px}
 .chatCurrent{padding:10px 13px;gap:20px;border-radius:23px;flex-wrap:nowrap}
 .chatPinBadge{flex-basis:56px;height:56px}
 .chatCurrentText{flex:1 1 120px;min-width:80px}
 .chatCurrentText>span{font-size:14px}
 .chatCurrentText>strong{font-size:25px}
 .chatLetterWrap{padding-left:28px;gap:16px;font-size:14px;flex-wrap:nowrap}
 .chatLetterWrap strong{width:52px;height:52px;font-size:27px;border-radius:18px}
 .chatCount{flex:0 0 142px;gap:10px;font-size:16px;border-radius:23px}
 .chatCount .chatIcon{width:32px;height:32px}
 .chatConversation{padding:0 14px 18px}
 .chatMessages{height:474px}
 .chatEntry{grid-template-columns:50px 118px minmax(0,1fr) 22px;gap:20px;min-height:71px;padding:7px 12px;border-radius:0}
 .chatEntry:not(.cityChainError):not(:last-child){border-bottom:1px solid #e2e8f7}
 .chatAuthorAvatar{width:50px;height:50px;border-radius:14px;font-size:22px}
 .chatAuthorMeta{font-size:16px}
 .chatAuthorMeta time{font-size:14px;margin-top:6px}
 .chatBubble{min-height:48px;padding:9px 16px;border-radius:25px}
 .chatBubble>strong{font-size:18px}
 .chatVerdict{width:28px;height:28px;font-size:23px}
 .chatReport{grid-column:4}
 .chatGame .chatReport>summary{font-size:28px;padding:0}
 .cityChainError{margin:0 0 4px;border-radius:20px}
 .chatComposer{margin:10px 6px 0;gap:12px;min-height:68px}
 .chatInputWrap{border-radius:21px;padding:0 20px;gap:18px}
 .chatInputWrap input{padding:18px 0!important}
 .chatInputWrap .chatIcon{width:36px;height:36px}
 .chatCharacterCount{font-size:14px}
 .chatComposer>.chatButton{flex-basis:92px;min-height:68px;border-radius:23px}
 .chatComposer>.chatButton .chatIcon{width:36px;height:36px}
 .chatHistory>summary,.chatInfo>summary{font-size:20px;padding:20px 22px 16px;gap:16px}
 .chatHistory .chatDisclosureBody,.chatInfo .chatDisclosureBody{padding:0 16px 20px}
 .chatHistoryList{font-size:17px}
 .chatHistoryList li{min-height:35px;padding:5px 20px;gap:22px}
 .chatHistoryToggle{font-size:15px!important;padding:16px 14px 2px}
 .chatScoreList li{min-height:52px;font-size:17px;gap:20px;padding:5px 12px}
 .chatScoreList li::before{width:40px;height:40px;flex-basis:40px;font-size:24px}
 .chatScoreList strong{font-size:18px}
 .chatRule-five .chatState{height:auto}
 .chatRule-five .chatCurrent{flex-wrap:wrap}
 .chatRule-five .chatLetterWrap{flex-wrap:wrap}
 .chatRule-either .chatMessages{height:340px}
}
@container chat-game (min-width:981px) and (max-width:1220px){
 .chatHero{padding-inline:20px}.chatHero h1{font-size:38px}.chatHero p{font-size:18px}
 .chatState{height:auto;min-height:105px;padding-inline:12px}.chatCurrent{flex-wrap:wrap;gap:8px}.chatPinBadge{flex-basis:40px;height:40px}
 .chatLetterWrap{padding-left:12px;gap:8px;font-size:13px}.chatCount{flex-basis:100px;font-size:13px;gap:5px}
 .chatEntry{grid-template-columns:40px 90px minmax(0,1fr) 18px;gap:10px;padding-inline:6px}.chatAuthorAvatar{width:40px;height:40px}.chatAuthorMeta{font-size:16px}
 .chatBubble{padding:9px 12px;gap:9px}.chatBubble>strong{font-size:18px}.chatVerdict{width:23px;height:23px;font-size:19px}
 .chatSteps li{font-size:14px;gap:12px}
 .chatHistoryList,.chatScoreList li{font-size:16px}
}

@container chat-game (min-width:981px){.chatSteps p{letter-spacing:-.35px}.chatCount{white-space:nowrap}.chatCount>span{white-space:nowrap}.chatCount .chatIcon{width:30px;height:30px}}
/* chat-home-shared:start */
@media(max-width:980px){.chatStandalone main{padding:0 12px}}
/* chat-home-shared:end */
/* chat-home-shared:start */
@media(max-width:600px){.chatStandalone main{padding:0 6px}}
/* chat-home-shared:end */
@container chat-game (max-width:600px){.chatHero{background-size:auto 48%;background-position:right bottom}}

.chatGame .chatReportActions>.chatButton{background:linear-gradient(145deg,#9295ff,#343bc7);border-color:#6667dc}.chatGame .chatReportPanel label:has(input:checked){background:#e9eaff}

/* Profile destinations are provided only by the authenticated, permission-checked batch. */
.chatGame .chatAvatarLink{display:grid;place-items:center;width:100%;height:100%;min-width:0;border-radius:inherit;color:inherit;text-decoration:none;padding:0;border:0}
.chatGame .chatAvatarLink img{width:100%;height:100%;min-width:100%;max-width:none;max-height:none;object-fit:cover;border-radius:inherit;display:block;margin:0;padding:0;border:0}
.chatGame .chatAuthorAvatar:has(.chatAvatarLink>img),.chatGame .chatPlayer:has(.chatAvatarLink>img){background:none}
.chatGame .chatAvatarLink:focus-visible{outline:3px solid #e4a731;outline-offset:-3px}


.chatGame .chessToolbar label[hidden]{display:none}
.chatGame .draughtsSquare.chessWhitePiece{color:#fff;text-shadow:0 1px 2px #162a4b,1px 0 1px #162a4b,-1px 0 1px #162a4b}
.chatGame .draughtsSquare.chessBlackPiece{color:#14243e;text-shadow:0 1px 1px #e5eeff}

.chatGame .draughtsStone{display:grid;place-items:center;width:64%;height:64%;aspect-ratio:1;border-radius:50%;flex-shrink:0;border:1px solid #263a5f;box-shadow:0 2px 3px #12213b70;font-size:.62em;line-height:1;text-shadow:none}
.chatGame .draughtsWhiteStone{background:linear-gradient(135deg,#fff,#dce5f5);color:#1c3155}
.chatGame .draughtsBlackStone{background:linear-gradient(135deg,#35496a,#0c1930);color:#fff;border-color:#b1c4e7}

.chatGame .chessBoard.connectBoard{grid-template-columns:repeat(7,minmax(0,1fr));aspect-ratio:7/6;border-color:#254f9b;background:#2d62b7}
.chatGame button.chessSquare.connectCell{background:#2d62b7}
.chatGame .connectDisc{display:block;width:76%;height:76%;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 3px 5px #152f6580,0 1px 1px #ffffff50}
.chatGame .connectEmpty{background:#e7edfb}
.chatGame .connectRed{background:linear-gradient(135deg,#ff6a65,#d21432)}
.chatGame .connectYellow{background:linear-gradient(135deg,#fff285,#efb800)}
.chatGame .connectWinning .connectDisc{outline:3px solid #fff;outline-offset:-4px;box-shadow:inset 0 0 0 7px #259d42}
.chatGame .connectColumns{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;max-width:640px;margin:14px auto 0;padding:0 5px;box-sizing:border-box}
.chatGame .connectColumns:empty{display:none}
.chatGame .connectColumn{display:flex;align-items:center;justify-content:center;gap:min(5px,10%);min-width:0;min-height:44px;margin:0 2px;padding:0;border:1px solid #a8bddd;border-radius:8px;background:#edf3ff;color:#17366a;font-size:17px;font-weight:800;line-height:1}
.chatGame .connectColumn::before{
 content:"";width:min(1.25em,46%);aspect-ratio:1;flex:none;background:currentColor;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v17m-7-7 7 7 7-7' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat
}
.chatGame .connectColumns+.connectBoard{margin-top:6px}

/* Schiffe versenken: fixed-size hidden-fleet boards; no external assets. */
.battleApp{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}.battleApp .battleLobby{flex:1 1 240px;min-width:0}.battleApp .battlePlay{flex:3 1 600px;min-width:0}.battleApp .chatCard{padding:22px}.battleList{display:grid;gap:8px;margin:20px 0}.battleList button{text-align:left;padding:10px;border:1px solid #cedcf3;border-radius:12px;background:#edf4ff;color:#10173e;overflow-wrap:anywhere}.battleControls{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.battleControls p{flex-basis:100%;margin:0}.battleControls button{padding:9px 12px;border-radius:10px;border:1px solid #b9cbed;background:#edf4ff;color:#14254c}.battleBoards{display:flex;flex-wrap:wrap;gap:18px}.battleBoards>section{flex:1 1 240px;min-width:0}.battleBoards h3{font-size:18px}.battleGrid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;max-width:500px;padding:8px;border-radius:12px;background:#1672a6}.battleGrid .battleCell{aspect-ratio:1;min-width:0;min-height:0;padding:0;border:0;border-radius:3px;background:#d5ecfa;color:#123959;font-size:clamp(12px,2vw,23px);line-height:1;opacity:1}.battleGrid .battleShip{background:#607c9e;color:#fff}.battleGrid .battleHit{background:#ef7786;color:#7e1525}.battleGrid .battleMiss{background:#f5fbff;color:#367aa4}.battleGrid .battleSunk{background:#d9445d;color:white}.battleApp button:disabled{cursor:default}.battleControls button:disabled{opacity:.45}.battleGrid .battleCell:enabled:hover{outline:2px solid #fff;background:#b5caff}.battleGrid .battleCell:focus-visible{outline:3px solid #ffc23d;z-index:1}.battleMessage{color:#a02240;overflow-wrap:anywhere}.battleApp details{line-height:1.5}.battleStatus{font-weight:600}.battleApp .battleCreate{margin:8px 0}
@media(max-width:1000px){.battleApp{grid-template-columns:1fr}.battleBoards{gap:12px}}
@media(max-width:600px){.battleBoards{grid-template-columns:1fr}.battleApp .chatCard{padding:14px}.battleGrid{width:100%;box-sizing:border-box}.battleGrid .battleCell{font-size:20px}.battleApp{gap:12px}}

/* Cooperative Sudoku. Intrinsic wrapping works inside narrow WCF columns too. */
.sudokuApp{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}.sudokuApp .chatCard{padding:22px}.sudokuLobby{flex:1 1 240px;min-width:0}.sudokuPlay{flex:2 1 440px;min-width:0}.sudokuList{display:grid;gap:8px;margin:20px 0}.sudokuList button{text-align:left;padding:10px;border:1px solid #cedcf3;border-radius:12px;background:#edf4ff;color:#10173e;overflow-wrap:anywhere}.sudokuGrid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));width:100%;max-width:450px;border:3px solid #4d568e;background:#4d568e;gap:1px;border-radius:5px;overflow:hidden;box-sizing:border-box}.sudokuGrid .sudokuCell{aspect-ratio:1;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:#fff;color:#3149b0;font-size:clamp(18px,3vw,30px);opacity:1;line-height:1}.sudokuGrid .sudokuGiven{background:#e8edf8;color:#111a3d;font-weight:700}.sudokuGrid .sudokuBlockRight{border-right:3px solid #4d568e}.sudokuGrid .sudokuBlockBottom{border-bottom:3px solid #4d568e}.sudokuGrid .sudokuSelected{background:#d1d5ff;box-shadow:inset 0 0 0 3px #7772de}.sudokuGrid .sudokuCell:enabled:hover{background:#e8eaff}.sudokuGrid .sudokuCell:focus-visible{outline:3px solid #6961d6;outline-offset:-3px}.sudokuDigits{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0;max-width:450px}.sudokuDigits button{flex:1 1 30px;padding:12px 0;border-radius:10px;border:1px solid #b6b9e5;background:#ededff;color:#202864;font-size:22px}.sudokuDigits button:disabled{opacity:.4;cursor:default}.sudokuControls button{padding:9px 12px;border-radius:10px;border:1px solid #bac7df;background:#edf4ff;color:#14254c}.sudokuControls button:disabled{opacity:.45}.sudokuStatus{font-weight:600}.sudokuProgress{font-size:14px;overflow-wrap:anywhere}.sudokuMessage{color:#a02240;overflow-wrap:anywhere}.sudokuApp details{line-height:1.5}.sudokuApp .sudokuCreate{margin:8px 0}@media(max-width:600px){.sudokuApp .chatCard{padding:14px}.sudokuApp{gap:12px}.sudokuDigits{gap:4px}.sudokuDigits button{font-size:20px}}

/* An unselected board is presentation only; disabled controls retain native semantics. */
.chatGame .chessPreview .chessBoard,.chatGame .chessPreview .connectColumns{filter:grayscale(1);opacity:.48}
.chatGame .chessPreview .chessPromotion{opacity:.48}

.battleGrid .battleCell.battlePlacement{background:#83d7cd;outline:2px solid #fff;outline-offset:-2px;color:#123959}
.battleGrid .battleCell.battlePlacementInvalid{background:#f2afb9;outline:2px solid #b92b45;outline-offset:-2px}

/* chat-notify:start */
.glChatJoinNotice{position:fixed;z-index:1000;right:20px;bottom:20px;width:380px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:18px;border:1px solid #dfe6ec;border-radius:16px;background:#fff;color:#27323b;box-shadow:0 10px 32px #1f304024;font-size:15px;line-height:1.5;font-family:inherit}.glChatJoinNotice strong{display:block;font-size:17px;color:#284664}.glChatJoinNotice p{margin:8px 0 14px;overflow-wrap:anywhere}.glChatJoinNotice a,.glChatJoinNotice button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:42px;padding:9px 14px;margin:0 8px 0 0;border:1px solid #ccd9e2;border-radius:10px;font:inherit;cursor:pointer}.glChatJoinNotice a{background:#2677a8;border-color:#2677a8;color:#fff;text-decoration:none;font-weight:600}.glChatJoinNotice button{background:#f7f9fb;color:#284664}.glChatJoinNotice :focus-visible{outline:3px solid #2677a8;outline-offset:3px}@media(max-width:600px){.glChatJoinNotice{right:16px;bottom:16px;font-size:14px}}
/* chat-notify:end */

/* Center Sudoku values independently of framework button text alignment. */
.sudokuGrid .sudokuCell,.sudokuDigits button{display:flex;align-items:center;justify-content:center;text-align:center}

/* Kreis und Kreuz: independent 3x3 board, using existing cards and palette. */
.tttApp{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,2fr);gap:20px;align-items:start}
.tttLobby{display:grid;gap:20px;min-width:0}.tttLobby .chatCard,.tttPlay{padding:24px}
.tttApp h2{margin:0 0 16px;font-size:clamp(21px,1.6vw,28px);color:#10143b}.tttApp p{line-height:1.5}
.tttMatch{display:block;width:100%;text-align:left;margin:12px 0;padding:14px;border:1px solid #cbd5ef;border-radius:16px;background:#eef3ff;color:#151f49;overflow-wrap:anywhere;box-sizing:border-box}
.tttMatch small{display:block;margin-top:6px;color:#53618b}.tttMatch[aria-current=true]{box-shadow:inset 0 0 0 2px #6b63ed}
.tttGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:460px;margin:24px auto}
.tttGrid .tttCell{display:flex;align-items:center;justify-content:center;aspect-ratio:1;width:100%;min-width:0;padding:0;border:2px solid #c7d1f0;border-radius:18px;background:linear-gradient(#fff,#e9effc);font-size:clamp(42px,8vw,80px);font-weight:700;line-height:1;box-shadow:0 3px 6px #26356714}
.tttGrid .tttCross{color:#4158be}.tttGrid .tttCircle{color:#ac3e83}.tttGrid .tttCell:disabled{opacity:1;cursor:default}.tttGrid .tttCell:not(:disabled):hover{background:#dedfff}.tttGrid .tttWinner{background:#e4f7db;border-color:#72b94e}
.tttCell:focus-visible,.tttMatch:focus-visible{outline:3px solid #7666e8;outline-offset:2px}.tttControls{display:flex;gap:12px;flex-wrap:wrap}.tttMessage{margin-top:18px;min-height:1.5em;color:#40547d}.tttPlayers{font-weight:600;overflow-wrap:anywhere}.tttStatus{color:#43527d}
@media(max-width:980px){.tttApp{grid-template-columns:1fr}.tttPlay{grid-row:1}.tttLobby .chatCard,.tttPlay{padding:18px}.tttGrid{gap:8px}.tttGrid .tttCell{border-radius:14px}}

@container chat-game (max-width:980px){.tttApp{grid-template-columns:1fr}.tttPlay{grid-row:1}.tttLobby .chatCard,.tttPlay{padding:18px}.tttGrid{gap:8px}.tttGrid .tttCell{border-radius:14px}}

/* A shared ranking card consumes the existing lobby snapshot, never a second poll. */
.chessLobby>.miniScores{margin-top:18px}.sudokuLobby>.chatCard,.battleLobby>.chatCard{margin-bottom:18px}
.miniScores h2{margin:0 0 12px!important}.miniScores>p{font-size:14px;color:#46547d}.miniScoreList{list-style:none;padding:0;margin:14px 0 0}.miniScoreList li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #dce3f6;font-size:16px}.miniScoreList li>span:nth-child(2){overflow-wrap:anywhere}.miniScoreRank{display:grid;place-items:center;border-radius:50%;width:30px;height:30px;background:#e8edfa;font-weight:700}.miniScoreList li:nth-child(1) .miniScoreRank{background:#ffdc72}.miniScoreList li:nth-child(2) .miniScoreRank{background:#d9dfe9}.miniScoreList li:nth-child(3) .miniScoreRank{background:#e8bb92}

/* Shared community finish: partner-search typography, white cards and blue actions.
   Board cells keep their own size, colour and disabled-state rules. */
/* chat-home-shared:start */
.chatGame{--chat-ink:#27323b;--chat-muted:#687782;--chat-blue:#2677a8;--chat-border:#dfe6ec;--game-heading:#284664;--game-accent-soft:#eaf4fa;font-size:16px;line-height:1.5}
/* chat-home-shared:end */
/* chat-home-shared:start */
.chatGame::before{background:linear-gradient(180deg,#f1f7fb,#f8fafc 55%,#f3f7fa)}
/* chat-home-shared:end */
.chatGame .chatCard{border:1px solid var(--chat-border);border-radius:18px;background:#fff;box-shadow:0 8px 28px #1f304012}
.chatGame .chatHero{height:auto;min-height:156px;gap:20px;padding:28px 20px;background-size:min(58%,900px) auto}
.chatGame .chatHero h1{font-size:clamp(28px,3cqw,36px);font-weight:800;line-height:1.2;letter-spacing:-.7px;color:var(--game-heading);overflow-wrap:anywhere}
.chatGame .chatHero p{font-size:17px;line-height:1.5;color:#405465;max-width:700px}
.chatGame .chatRight{padding-top:0}
.chatGame .chatRules,.chatGame .chatParticipants{min-height:0}
.chatGame .chatPlayerList{flex-wrap:wrap}
.chatGame .chatCurrent,.chatGame .chatCount{background:var(--game-accent-soft)}
.chatGame .chatPinBadge{color:var(--chat-blue);background:#dceef8;box-shadow:none}
.chatGame .chatLetterWrap{border-color:#c5dce9}
.chatGame .chatLetterWrap strong{color:var(--game-heading);background:#fff;border-color:#cbdde9;box-shadow:none}
.chatGame :is(.chatParticipants h2 .chatIcon,.chatCount .chatIcon,.chatHistory>summary>.chatIcon:first-child,.chatInfo>summary>.chatIcon:first-child){color:var(--chat-blue)}
.chatGame .chatBubble{background:#f5f8fb;border-color:#dfe6ec;box-shadow:0 2px 4px #1f30400d}
.chatGame .chatAuthorName a{color:var(--game-heading)}
.chatGame .chatAuthorName,.chatGame .chatAuthorName :is(a,.gameProfileTrigger){font-weight:400}
.chatGame .chatAuthorMeta time{color:var(--chat-muted)}
.chatGame .chatHistoryList li{background:#f5f8fb}
.chatGame .chatHistoryList:not(.chatMostUsedList,.anagramHistory) li:last-child{background:#e4f1f9}
.chatGame .chatHistoryPin{background:var(--chat-blue)}
.chatGame .chatScoreList{background:#fff;border-color:var(--chat-border);box-shadow:none}
.chatGame .chatScoreList li{border-color:#e8edf1}
.chatGame .chatInputWrap{border-color:#bccedb;border-radius:12px;box-shadow:none}
.chatGame .chatInputWrap:focus-within{border-color:var(--chat-blue)}
.chatGame .chatInputWrap > #cityChainWord:focus{outline:none}
.chatGame .chatInputWrap input::placeholder{color:var(--chat-muted)}
.chatGame .chatInputWrap > #cityChainWord:disabled{background:transparent!important}
.chatGame :is(.chatButton,.chatComposer>.chatButton,.chatEitherFooter>.chatButton,.chatReportActions>.chatButton){background:#2677a8;border-color:#2677a8;border-radius:10px;box-shadow:none;color:#fff!important}
.chatGame :is(.chatButton,.chatComposer>.chatButton,.chatEitherFooter>.chatButton,.chatReportActions>.chatButton):enabled:hover{background:#1f628b;border-color:#1f628b}
.chatGame .chatDateChoices .chatDate{background:#b32d67;border-color:#b32d67}
.chatGame .chatDateChoices .chatDate:enabled:hover{background:#962558;border-color:#962558}
.chatDateChoices>.chatButton>.chatIcon{width:1em;height:1em;flex:none}
.chatDateChoices>[data-chat-choice=Move]{white-space:normal;overflow-wrap:anywhere}
.chatDateWait:not([hidden]){display:grid;place-items:center;padding:6px 12px;border:1px solid var(--chat-border);background:#edf0f2;color:#536572;text-align:center;overflow-wrap:anywhere}
.chatGame .chatEitherOption{border-color:#ccd9e2;border-radius:10px;color:var(--game-heading);box-shadow:none}
.chatGame .chatEitherOption[aria-pressed=true]{background:#2677a8;border-color:#2677a8;color:#fff;box-shadow:0 0 0 3px #2677a822}
.chatGame .chatReportPanel{background:#fff;border-color:var(--chat-border);border-radius:16px;box-shadow:0 10px 32px #1f304024}
.chatGame .chatReportPanel input[type=radio]{accent-color:var(--chat-blue)}
.chatGame .chatReportPanel label:has(input:checked){background:var(--game-accent-soft)}
.chatGame :is(.chessApp,.battleApp,.sudokuApp,.tttApp){display:grid;grid-template-columns:var(--mini-columns,minmax(230px,.7fr) minmax(0,1.5fr));gap:var(--mini-gap,20px);align-items:start;padding:0 0 24px;color:var(--chat-ink);font-size:16px;line-height:1.5}
.chatGame :is(.chessLobby,.battleLobby,.sudokuLobby,.tttLobby,.miniResults){display:grid;align-content:start;gap:var(--mini-gap,20px);min-width:0}
.chatGame :is(.chessLobby,.battleLobby,.sudokuLobby,.tttLobby,.miniResults)>.chatCard{margin:0}
.chatAppActive aside+.miniResults{margin-top:var(--mini-gap,20px)}
.chatGame .miniResults:empty{display:none}
.chatGame :is(.chessTitle,.tttPlayers):empty{display:none}
.chatGame :is(.chessApp,.battleApp,.sudokuApp,.tttApp) .chatCard{padding:var(--mini-card-padding,22px)}
.chatGame :is(.chessPlay,.battlePlay,.sudokuPlay,.tttPlay){grid-row:var(--mini-play-row,auto);min-width:0}
@media (min-width:981px){
 @container chat-game (min-width:981px){
  .chatGame:not(.chatAppActive) > section:has(>.miniResults){
   grid-template-columns:minmax(210px,1fr) minmax(0,2.22fr) minmax(210px,1fr);gap:18px
  }
  .chatGame:not(.chatAppActive) :is(.chessBoard,.connectColumns){max-width:540px}
  .chatGame:not(.chatAppActive) .tttGrid{max-width:380px}
  .chatGame:not(.chatAppActive) :is(.sudokuGrid,.sudokuDigits){max-width:400px}
  .chatGame:not(.chatAppActive) .dotsScroll{--dots-edge-length:40px;width:max-content;margin-inline:auto}
  .chatGame:not(.chatAppActive) .battleBoards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:540px;margin-inline:auto}
 }
}
.chatGame :is(.chessApp,.battleApp,.sudokuApp,.tttApp) h2{font-size:22px;font-weight:750;line-height:1.3;letter-spacing:-.3px;color:var(--game-heading);margin:0 0 14px;overflow-wrap:anywhere}
.chatGame :is(.chessApp,.battleApp,.sudokuApp,.tttApp) h3{font-size:18px;color:var(--game-heading);margin-bottom:10px}
.chatGame :is(.chessStatus,.battleStatus,.sudokuStatus,.tttStatus){font-size:16px;font-weight:600;color:#405465;line-height:1.5;min-height:24px}
.chatGame :is(.chessMatch,.battleList button,.battleWaitingList button,.battleFinished button,.sudokuList button,.sudokuWaitingList button,.sudokuFinished button,.tttMatch){display:block;width:100%;min-height:48px;margin:0;padding:12px 14px;border:1px solid #dfe6ec;border-radius:12px;background:#f7f9fb;color:var(--chat-ink);font:inherit;text-align:left;overflow-wrap:anywhere;box-shadow:none}
.chatGame .tttMatch+.tttMatch{margin-top:10px}
.chatGame :is(.chessMatch,.tttMatch,.sudokuList button,.sudokuWaitingList button,.sudokuFinished button,.battleList button,.battleWaitingList button,.battleFinished button)[aria-current]{border-color:#2677a8;background:#edf6fb;box-shadow:inset 0 0 0 1px #2677a8}
.chatGame :is(.chessMatch,.battleList button,.battleWaitingList button,.battleFinished button,.sudokuList button,.sudokuWaitingList button,.sudokuFinished button,.tttMatch):enabled:hover{background:#eaf4fa;border-color:#aacbdc}
.chatGame :is(.chessMatch small,.tttMatch small){font-size:13px;color:var(--chat-muted);margin-top:4px}
.chatGame :is(.chessToolbar,.chessActions,.battleControls,.sudokuControls,.tttControls){display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px}
.chatGame :is(.chessToolbar button,.chessActions button,.battleControls button,.sudokuControls button,.tttControls button){min-height:42px;padding:9px 14px;border:1px solid #ccd9e2;border-radius:10px;background:#f7f9fb;color:var(--game-heading);font-size:15px;line-height:1.4;box-shadow:none;white-space:normal}
.chatGame :is(.chessApp,.battleApp,.sudokuApp,.tttApp) select{min-height:42px;max-width:100%;padding:8px 12px;border:1px solid #ccd9e2;border-radius:10px;background:#fff;color:var(--chat-ink);font:inherit}
.chatGame :is(.chessCreate label,.chessToolbar label){font-size:14px;color:#526575}
.chatGame :is(.chessMessage,.battleMessage,.sudokuMessage,.tttMessage):not(:empty){margin-top:18px!important;padding:12px 14px;border:1px solid #dfe6ec;border-radius:10px;background:#f5f8fb;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.chatGame :is(.battleMessage,.sudokuMessage):not(:empty),.chatGame .chessMessageError{color:#9b2345;border-color:#efcbd5;background:#fff4f6}
.chatGame :is(.chessMessage,.battleMessage,.sudokuMessage,.tttMessage):empty{display:none}
.chatGame :is(.chatButton,.chatEitherOption,.chessToolbar button,.chessActions button,.battleControls button,.sudokuControls button,.tttControls button,.sudokuDigits button):disabled{background:#edf0f3!important;border-color:#d5dde4!important;color:#7a8793!important;box-shadow:none;opacity:1;filter:none;cursor:not-allowed}
.chatGame :is(button,input,select,summary,a):focus-visible{outline:3px solid #2677a8;outline-offset:3px}
.chatGame :is(.chessSquare,.sudokuCell,.battleCell,.tttCell):focus-visible{outline-offset:-3px}
.chatGame .miniScores>p{color:var(--chat-muted);line-height:1.5}
.chatGame .miniScoreList li{border-color:#e8edf1}
/* Ranking cards share a frame, row rhythm and stable numeric alignment. */
.chatGame .miniScoreList{border:1px solid var(--chat-border);border-radius:17px;overflow:hidden}
.chatGame .miniScoreList li{padding:10px 12px;min-height:48px;gap:12px}
.chatGame .miniScoreList li:last-child{border-bottom:0}
.chatGame :is(.miniScoreList,.chatScoreList) strong{font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.chatGame :is(.miniScoreList,.chatScoreList) a{text-underline-offset:3px;text-decoration-thickness:1px}
.chatGame :is(.miniScoreList,.chatScoreList) a:hover{text-decoration-thickness:2px}
@media(prefers-reduced-motion:reduce){.chatGame *{scroll-behavior:auto;transition:none!important}}

.chatGame :is(.sudokuGrid,.battleGrid,.tttGrid)[data-preview=true]{filter:grayscale(1);opacity:.48}
.chatGame .chatAvatarLink:focus-visible{outline-color:var(--chat-blue)}

.chatGame .chatButton{min-height:42px}
.chatGame a{color:var(--chat-blue)}
.chatGame .chatReportPanel{font-size:15px;line-height:1.5}
.chatGame .chatReportPanel label{font-size:14px;min-height:36px}
.chatGame .chatReportActions>button:not(.chatButton){min-height:42px;padding:9px 14px;border:1px solid #ccd9e2;border-radius:10px;box-shadow:none;background:#f7f9fb;color:var(--game-heading)}
.chatGame :is(.sudokuGrid,.sudokuDigits){margin-inline:auto}
.chatGame :is(.sudokuList,.battleList,.chessMatchList,.tttOpen,.tttFinished):empty{display:none}
.chatGame .chessApp button:disabled:not(.chessSquare){opacity:1}
.chatGame .chessMessage.chessMessageError:not(:empty){color:#9b2345;border-color:#efcbd5;background:#fff4f6}
.chatGame .chatGamePicker summary{min-height:36px;padding:6px 10px;border:1px solid #dfe6ec;border-radius:10px;background:#fff;color:var(--game-heading)}
.chatGame :is(.chatReportHeading button,.chatReportToast button){display:grid;place-items:center;min-width:36px;min-height:36px;border-radius:8px}

/* Keep the Sudoku keypad balanced instead of an orphaned last digit. */
.chatGame .sudokuDigits{display:grid;grid-template-columns:repeat(var(--sudoku-digit-columns,9),minmax(0,1fr))}
.chatGame .sudokuDigits button{min-width:0;min-height:42px}

/* Clear creation/joining cards; profile links are siblings of action buttons. */
.chatGame :is(.miniWaitingList,.sudokuList,.sudokuFinished,.battleList,.battleFinished){display:grid;gap:10px;margin-top:14px}
.chatGame :is(.sudokuWaitingList button,.battleWaitingList button)[aria-current]{border-color:#2677a8;background:#edf6fb;box-shadow:inset 0 0 0 1px #2677a8}
.chatGame .miniWaitingProfile{padding:0 4px 12px;border-bottom:1px solid #e8edf1;min-width:0}
.chatGame .miniWaitingList>button:not(:first-child){margin-top:8px}
.chatGame .miniProfileLink{display:flex;align-items:center;gap:10px;min-width:0;font-size:14px;line-height:1.4;text-decoration:none}
.chatGame .miniProfileLink>span:last-child{min-width:0;overflow-wrap:anywhere}
.chatGame a.miniProfileLink:hover{text-decoration:underline}
.chatGame .miniProfileLink small{display:block;color:var(--chat-muted);font-size:12px;margin-top:3px}
.chatGame .miniProfileAvatar{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;overflow:hidden;border-radius:8px;background:#eaf4fa;color:#2677a8;font-size:22px}
.chatGame .miniProfileAvatar img{display:block;width:100%;height:100%;object-fit:cover;border:0;padding:0}

/* Game header artwork: fixed local SVG, no network or runtime work. */
.chatTheme-plain .chatHero{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201500%20190%22%3E%3Cpath%20d%3D%22M600%20165Q800%20110%201000%20155T1500%20130V190H600Z%22%20fill%3D%22%23c6e3f8%22%20opacity%3D%22.4%22%2F%3E%3Cg%20fill%3D%22%23c6e3f8%22%20stroke%3D%22%2379acd3%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.6%22%3E%3Cpath%20d%3D%22M940%2045h190v80h-80l-35%2028v-28h-75Z%22%2F%3E%3Cpath%20d%3D%22M1170%2024h210v90h-65l-32%2025v-25h-113Z%22%2F%3E%3Cpath%20d%3D%22M990%2080h90m145-20h100m-100%2027h64%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.chatGame:has(>.chessApp[data-rule="chess"])>.chatHero{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201500%20190%22%3E%3Cpath%20d%3D%22M600%20165Q800%20110%201000%20155T1500%20130V190H600Z%22%20fill%3D%22%23c6e3f8%22%20opacity%3D%22.4%22%2F%3E%3Cg%20fill%3D%22%23c6e3f8%22%20stroke%3D%22%2379acd3%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.6%22%3E%3Cpath%20d%3D%22M1100%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1119%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1138%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1157%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1176%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1195%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1214%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1233%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1252%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%2010h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%2029h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%2048h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%2067h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%2086h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%20105h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%20124h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%20143h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%20162h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M985%20153h90l-12-18h-66Zm18-22h54l-10-64h-34Zm1-66h52V40h-14V24h-23v16h-15Z%22%2F%3E%3Cpath%20d%3D%22M1030%204v30m-13-16h26%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.chatGame:has(>.chessApp[data-rule="draughts"])>.chatHero{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201500%20190%22%3E%3Cpath%20d%3D%22M600%20165Q800%20110%201000%20155T1500%20130V190H600Z%22%20fill%3D%22%23c6e3f8%22%20opacity%3D%22.4%22%2F%3E%3Cg%20fill%3D%22%23c6e3f8%22%20stroke%3D%22%2379acd3%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.6%22%3E%3Cpath%20d%3D%22M1100%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1119%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1138%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1157%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1176%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1195%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1214%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1233%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1252%2010v152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%2010h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%2029h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%2048h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%2067h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%2086h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%20105h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%20124h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%20143h152%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1100%20162h152%22%20fill%3D%22none%22%2F%3E%3Cellipse%20cx%3D%221000%22%20cy%3D%22140%22%20rx%3D%2233%22%20ry%3D%2212%22%2F%3E%3Cellipse%20cx%3D%221000%22%20cy%3D%22129%22%20rx%3D%2233%22%20ry%3D%2212%22%2F%3E%3Cellipse%20cx%3D%221000%22%20cy%3D%22118%22%20rx%3D%2233%22%20ry%3D%2212%22%2F%3E%3Cellipse%20cx%3D%221340%22%20cy%3D%22140%22%20rx%3D%2233%22%20ry%3D%2212%22%2F%3E%3Cellipse%20cx%3D%221340%22%20cy%3D%22129%22%20rx%3D%2233%22%20ry%3D%2212%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.chatGame:has(>.chessApp[data-rule="connect_four"])>.chatHero{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201500%20190%22%3E%3Cpath%20d%3D%22M600%20165Q800%20110%201000%20155T1500%20130V190H600Z%22%20fill%3D%22%23c6e3f8%22%20opacity%3D%22.4%22%2F%3E%3Cg%20fill%3D%22%23c6e3f8%22%20stroke%3D%22%2379acd3%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.6%22%3E%3Crect%20x%3D%221050%22%20y%3D%2210%22%20width%3D%22240%22%20height%3D%22155%22%20rx%3D%2212%22%2F%3E%3Ccircle%20cx%3D%221074%22%20cy%3D%2228%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221106%22%20cy%3D%2228%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221138%22%20cy%3D%2228%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221170%22%20cy%3D%2228%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221202%22%20cy%3D%2228%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221234%22%20cy%3D%2228%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221266%22%20cy%3D%2228%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221074%22%20cy%3D%2252%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221106%22%20cy%3D%2252%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221138%22%20cy%3D%2252%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221170%22%20cy%3D%2252%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221202%22%20cy%3D%2252%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221234%22%20cy%3D%2252%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221266%22%20cy%3D%2252%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221074%22%20cy%3D%2276%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221106%22%20cy%3D%2276%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221138%22%20cy%3D%2276%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221170%22%20cy%3D%2276%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221202%22%20cy%3D%2276%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221234%22%20cy%3D%2276%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221266%22%20cy%3D%2276%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221074%22%20cy%3D%22100%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221106%22%20cy%3D%22100%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221138%22%20cy%3D%22100%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221170%22%20cy%3D%22100%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221202%22%20cy%3D%22100%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221234%22%20cy%3D%22100%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221266%22%20cy%3D%22100%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221074%22%20cy%3D%22124%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221106%22%20cy%3D%22124%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221138%22%20cy%3D%22124%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221170%22%20cy%3D%22124%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221202%22%20cy%3D%22124%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221234%22%20cy%3D%22124%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221266%22%20cy%3D%22124%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221074%22%20cy%3D%22148%22%20r%3D%228%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221106%22%20cy%3D%22148%22%20r%3D%228%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221138%22%20cy%3D%22148%22%20r%3D%228%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221170%22%20cy%3D%22148%22%20r%3D%228%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221202%22%20cy%3D%22148%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221234%22%20cy%3D%22148%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Ccircle%20cx%3D%221266%22%20cy%3D%22148%22%20r%3D%228%22%20fill%3D%22%23edf6fd%22%2F%3E%3Cpath%20d%3D%22M1074%20148h96%22%20fill%3D%22none%22%20stroke-width%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.chatGame:has(>.battleApp)>.chatHero{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201500%20190%22%3E%3Cpath%20d%3D%22M600%20165Q800%20110%201000%20155T1500%20130V190H600Z%22%20fill%3D%22%23c6e3f8%22%20opacity%3D%22.4%22%2F%3E%3Cg%20fill%3D%22%23c6e3f8%22%20stroke%3D%22%2379acd3%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.6%22%3E%3Cpath%20d%3D%22M950%20120h360l-35%2035H990Z%22%2F%3E%3Cpath%20d%3D%22M1060%20115V30l-85%2075h85m10-75%20105%2075h-105%22%2F%3E%3Cpath%20d%3D%22M925%20170q40-25%2080%200t80%200t80%200t80%200t80%200%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.chatGame:has(>.sudokuApp)>.chatHero{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201500%20190%22%3E%3Cpath%20d%3D%22M600%20165Q800%20110%201000%20155T1500%20130V190H600Z%22%20fill%3D%22%23c6e3f8%22%20opacity%3D%22.4%22%2F%3E%3Cg%20fill%3D%22%23c6e3f8%22%20stroke%3D%22%2379acd3%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.6%22%3E%3Cpath%20d%3D%22M1020%2010v153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1037%2010v153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1054%2010v153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1071%2010v153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1088%2010v153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1105%2010v153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1122%2010v153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1139%2010v153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1156%2010v153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1173%2010v153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1020%2010h153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1020%2027h153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1020%2044h153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1020%2061h153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1020%2078h153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1020%2095h153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1020%20112h153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1020%20129h153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1020%20146h153%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1020%20163h153%22%20fill%3D%22none%22%2F%3E%3Cg%20fill%3D%22%2379acd3%22%20stroke%3D%22none%22%20font-family%3D%22sans-serif%22%20font-size%3D%2216%22%3E%3Ctext%20x%3D%221030%22%20y%3D%2246%22%3E5%3C%2Ftext%3E%3Ctext%20x%3D%221130%22%20y%3D%2278%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%221062%22%20y%3D%22110%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%221190%22%20y%3D%22142%22%3E7%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.chatGame:has(>.tttApp)>.chatHero{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201500%20190%22%3E%3Cpath%20d%3D%22M600%20165Q800%20110%201000%20155T1500%20130V190H600Z%22%20fill%3D%22%23c6e3f8%22%20opacity%3D%22.4%22%2F%3E%3Cg%20fill%3D%22%23c6e3f8%22%20stroke%3D%22%2379acd3%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.6%22%3E%3Cpath%20d%3D%22M1110%2020v145m55-145v145m-105-95h155m-155%2045h155%22%20fill%3D%22none%22%2F%3E%3Ccircle%20cx%3D%221080%22%20cy%3D%2240%22%20r%3D%2214%22%20fill%3D%22none%22%2F%3E%3Ccircle%20cx%3D%221187%22%20cy%3D%22138%22%20r%3D%2214%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22m1120%2080%2030%2025m0-25-30%2025m58-80%2028%2028m0-28-28%2028%22%20fill%3D%22none%22%20stroke-width%3D%225%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.chatGame:has(>.hangmanApp)>.chatHero{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201500%20190%22%3E%3Cpath%20d%3D%22M600%20165Q800%20110%201000%20155T1500%20130V190H600Z%22%20fill%3D%22%23c6e3f8%22%20opacity%3D%22.4%22%2F%3E%3Cg%20fill%3D%22%23c6e3f8%22%20stroke%3D%22%2379acd3%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.6%22%3E%3Cpath%20d%3D%22M1000%20165h190m-165%200V20h130v24%22%20fill%3D%22none%22%2F%3E%3Ccircle%20cx%3D%221155%22%20cy%3D%2261%22%20r%3D%2217%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1155%2078v45m0-36-32%2023m32-23%2032%2023m-32%2013-28%2035m28-35%2028%2035%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.chatGame:has(>.dotsApp)>.chatHero{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201500%20190%22%3E%3Cpath%20d%3D%22M600%20165Q800%20110%201000%20155T1500%20130V190H600Z%22%20fill%3D%22%23c6e3f8%22%20opacity%3D%22.4%22%2F%3E%3Cg%20fill%3D%22%23c6e3f8%22%20stroke%3D%22%2379acd3%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.6%22%3E%3Crect%20x%3D%221090%22%20y%3D%2265%22%20width%3D%2245%22%20height%3D%2245%22%2F%3E%3Ccircle%20cx%3D%221045%22%20cy%3D%2220%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221090%22%20cy%3D%2220%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221135%22%20cy%3D%2220%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221180%22%20cy%3D%2220%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221225%22%20cy%3D%2220%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221045%22%20cy%3D%2265%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221090%22%20cy%3D%2265%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221135%22%20cy%3D%2265%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221180%22%20cy%3D%2265%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221225%22%20cy%3D%2265%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221045%22%20cy%3D%22110%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221090%22%20cy%3D%22110%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221135%22%20cy%3D%22110%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221180%22%20cy%3D%22110%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221225%22%20cy%3D%22110%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221045%22%20cy%3D%22155%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221090%22%20cy%3D%22155%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221135%22%20cy%3D%22155%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221180%22%20cy%3D%22155%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Ccircle%20cx%3D%221225%22%20cy%3D%22155%22%20r%3D%225%22%20fill%3D%22%2379acd3%22%2F%3E%3Cpath%20d%3D%22M1045%2020h135m-90%200v90h90m-45-45h90%22%20fill%3D%22none%22%20stroke-width%3D%225%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.chatGame:has(>.unknownApp)>.chatHero{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201500%20190%22%3E%3Cpath%20d%3D%22M600%20165Q800%20110%201000%20155T1500%20130V190H600Z%22%20fill%3D%22%23c6e3f8%22%20opacity%3D%22.4%22%2F%3E%3Cg%20fill%3D%22%23c6e3f8%22%20stroke%3D%22%2379acd3%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.6%22%3E%3Crect%20x%3D%221000%22%20y%3D%2225%22%20width%3D%2285%22%20height%3D%22125%22%20rx%3D%2212%22%20transform%3D%22rotate%28-12%201040%2085%29%22%2F%3E%3Crect%20x%3D%221130%22%20y%3D%2220%22%20width%3D%2285%22%20height%3D%22125%22%20rx%3D%2212%22%20transform%3D%22rotate%288%201170%2085%29%22%2F%3E%3Cpath%20d%3D%22M1150%2060q0-25%2024-22t12%2035l-16%2015v9m0%2012v7%22%20fill%3D%22none%22%20stroke-width%3D%226%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.chatGame:has(>.slfApp)>.chatHero{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201500%20190%22%3E%3Cpath%20d%3D%22M600%20165Q800%20110%201000%20155T1500%20130V190H600Z%22%20fill%3D%22%23c6e3f8%22%20opacity%3D%22.4%22%2F%3E%3Cg%20fill%3D%22%23c6e3f8%22%20stroke%3D%22%2379acd3%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.6%22%3E%3Cpath%20d%3D%22M980%20135V80h30V50h30v85h25V65h30v70h35V95h30v40Z%22%2F%3E%3Cpath%20d%3D%22M1250%2020q-80%2035%200%2065t-20%2080m-80-10q80-30%20160%200%22%20fill%3D%22none%22%2F%3E%3Cg%20fill%3D%22%2379acd3%22%20stroke%3D%22none%22%20font-family%3D%22sans-serif%22%20font-size%3D%2227%22%3E%3Ctext%20x%3D%221020%22%20y%3D%2238%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%221170%22%20y%3D%2255%22%3EB%3C%2Ftext%3E%3Ctext%20x%3D%221320%22%20y%3D%22130%22%3EC%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")}

/* Game header artwork:end */


/* Hangman reuses the existing tttApp lobby/card layout. No secret is embedded. */
.chatGame .hmDrawing{display:block;width:min(100%,230px);height:240px;margin:12px auto;color:var(--chat-ink)}
.chatGame .hmMask{font-size:clamp(18px,3cqw,30px);font-weight:700;text-align:center;overflow-wrap:anywhere;line-height:1.7}
.chatGame .hmScore,.chatGame .hmTries{text-align:center}
.chatGame .hmKeyboard{display:grid;grid-template-columns:repeat(var(--hm-key-columns,10),minmax(0,1fr));max-width:620px;gap:7px;margin:20px auto}
.chatGame button.hmKey{display:grid;place-items:center;padding:8px;min-height:44px;font-size:18px;border:1px solid var(--chat-border);border-radius:10px;background:#eef4fc;color:var(--chat-ink)}
.chatGame button.hmKey:disabled{opacity:.5;cursor:not-allowed}
.chatGame button.hmKey.hmHit{background:#dff4df;opacity:1}
.chatGame button.hmKey.hmMiss{background:#f7dfe5;opacity:1}
.chatGame .hmWordForm{margin:20px 0;padding:16px;border:1px solid var(--chat-border);border-radius:16px}
.chatGame .hmWordForm label{display:grid;gap:8px;font-weight:700}
.chatGame .hmWordForm input{box-sizing:border-box;width:100%;min-height:44px;border:1px solid var(--chat-border);border-radius:10px;padding:10px;font:inherit}
.chatGame .hmWordForm p{font-size:14px}

/* Dots and Boxes shares the existing tttApp cards and status styling. */
.chatGame .dotsScroll{max-width:100%;overflow:auto;padding:18px 8px;margin:12px 0 22px;border:1px solid var(--chat-border);border-radius:14px;overscroll-behavior-inline:contain}
.chatGame .dotsGrid{display:grid;grid-template-columns:repeat(calc(var(--dots-size) - 1),12px var(--dots-edge-length,44px)) 12px;grid-template-rows:repeat(calc(var(--dots-size) - 1),12px var(--dots-edge-length,44px)) 12px;width:max-content;margin:auto;isolation:isolate}
.chatGame .dotsPoint{width:12px;height:12px;background:#294865;border-radius:50%;z-index:3;pointer-events:none}
.chatGame .dotsBox{display:grid;place-items:center;border-radius:7px;font-size:22px;font-weight:700;pointer-events:none;color:#19354c}
.chatGame .dotsBox.dotsBlue{background:#d4eafa}.chatGame .dotsBox.dotsOrange{background:#ffdfb3}
.chatGame button.dotsEdge{display:block;position:relative;padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;min-width:0;min-height:0;overflow:visible;border-radius:0!important;color:#8196a8;opacity:1;touch-action:manipulation}
.chatGame button.dotsHorizontal{width:var(--dots-edge-length,44px);height:12px}.chatGame button.dotsVertical{width:12px;height:var(--dots-edge-length,44px)}
.chatGame .dotsHit{display:block;position:absolute;width:44px;height:44px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:8px;z-index:2}
.chatGame .dotsHit:after{content:'';position:absolute;border-radius:4px;background:currentColor;opacity:.3}
.chatGame .dotsHorizontal .dotsHit:after{width:calc(var(--dots-edge-length,44px) - 4px);height:5px;left:50%;top:19px;transform:translateX(-50%)}.chatGame .dotsVertical .dotsHit:after{width:5px;height:calc(var(--dots-edge-length,44px) - 4px);left:19px;top:50%;transform:translateY(-50%)}
.chatGame button.dotsEdge.dotsBlue{color:#0873ba}.chatGame button.dotsEdge.dotsOrange{color:#ab5500}
.chatGame .dotsEdge.dotsBlue .dotsHit:after,.chatGame .dotsEdge.dotsOrange .dotsHit:after{opacity:1}
.chatGame button.dotsEdge:not(:disabled):hover .dotsHit,.chatGame button.dotsEdge:focus-visible .dotsHit{background:#b8ddf480;outline:2px solid #2981b5;outline-offset:-2px}
.chatGame button.dotsEdge:disabled{cursor:default}.chatGame .dotsScore{font-weight:700}.chatGame .dotsHint{font-size:14px}
.chatGame .dotsSize{display:block;margin:8px 0 12px;max-width:100%;min-height:44px;font:inherit;border:1px solid var(--chat-border);border-radius:10px;padding:8px}

/* Appointment controls share the suite's cards; no sizing changes to game boards. */
.gameSchedule { padding: 18px 22px; }
.gameSchedule h2 { margin: 0 0 12px; font-size: 1.2rem; }
.gameScheduleChoice label { display:grid; gap:6px; font-size:1rem; }
.gameScheduleChoice select { min-height:44px; max-width:100%; font:inherit; }
.gameScheduleHelp,.gameScheduleMessage { margin:10px 0; font-size:.95rem; }
.chatGame .gameScheduleLobby:not(:has(.gameScheduleList > .gameScheduleItem)) { display:none; }
.gameScheduleLobby > summary { cursor:pointer; min-height:44px; }
.chatGame .gameScheduleLobby.chatCard > summary { min-height:0; padding:0; margin:0 0 14px; }
.chatGame .gameScheduleLobby.chatCard > .chatDisclosureBody { padding:0; }
.glGameAppointmentNotice { bottom:24px; top:auto; max-height:70vh; overflow:auto; }
.glGameAppointmentNotice a { display:inline-block; margin-bottom:12px; }

.gameScheduleChoice select,.gameScheduleSecondary { border:1px solid #cbdbe6; border-radius:10px; background:#fff; color:#304e68; padding:10px 12px; font:inherit; box-sizing:border-box; }
.gameScheduleSecondary { cursor:pointer; background:#f0f6fa; }
.gameScheduleItem button:disabled { color:#81909b; background:#edf1f4; cursor:not-allowed; }
.gameScheduleChoice label { max-width:100%; min-width:0; }
.gameScheduleMessage { overflow-wrap:anywhere; }
/* Private multiplayer word game: shared cards, comfortably sized mobile controls. */
.unknownApp { display:grid; grid-template-columns:minmax(220px,1fr) minmax(320px,2fr) minmax(210px,.9fr); gap:20px; align-items:start; }
.unknownLobby,.unknownRight { display:grid; gap:18px; min-width:0; }
.unknownApp .chatCard { padding:22px; min-width:0; }
.unknownApp h2 { font-size:1.3rem; margin:0 0 12px; }
.unknownApp h3 { font-size:1.1rem; margin:20px 0 10px; }
.unknownApp p,.unknownApp li { font-size:1rem; overflow-wrap:anywhere; }
.unknownApp form { display:grid; gap:12px; margin:14px 0; }
.unknownApp label { display:grid; gap:6px; min-width:0; font-size:1rem; }
.unknownApp input,.unknownApp select { width:100%; max-width:100%; min-height:44px; padding:10px 12px; border:1px solid #cbdbe6; border-radius:10px; background:#fff; color:#304e68; font:inherit; box-sizing:border-box; }
.unknownApp button { min-height:44px; padding:10px 14px; border:1px solid #bfd3e0; border-radius:12px; background:#f1f7fb; color:#304e68; font:inherit; cursor:pointer; white-space:normal; overflow-wrap:anywhere; }
.unknownApp button:disabled { opacity:.55; cursor:not-allowed; }
.unknownRoom { border-top:1px solid #e3ebf1; margin-top:12px; padding-top:12px; }
.unknownRoom button { width:100%; text-align:left; }
.unknownPlayers ul { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; }
.unknownPlayers li { background:#f0f6fa; padding:8px 12px; border-radius:10px; }
.unknownRole { width:100%; min-height:110px!important; margin:16px 0; background:#e5effc!important; border:1px solid #bbcee9!important; font-weight:700!important; }
.unknownActions { display:grid; gap:12px; margin:16px 0; }
.unknownHints { padding-left:24px; }
.unknownHints li { padding:8px 0; border-bottom:1px solid #e7edf3; }
.unknownClock { color:#536d83; font-variant-numeric:tabular-nums; }
.unknownResolution { border-top:1px solid #e2eaf1; margin-top:16px; }
.unknownApp details:not(.chatCard) summary { cursor:pointer; min-height:44px; padding:10px 0; }
.slfApp{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,2.5fr) minmax(180px,.8fr);gap:20px;align-items:start;color:#263b4c;font-size:16px}
.slfApp .chatCard{min-width:0;padding:22px}.slfLobby{display:grid;gap:20px}.slfApp h2{font-size:22px;line-height:1.25}.slfApp label{display:grid;gap:6px;margin:10px 0}.slfApp input:not([type=checkbox]),.slfApp select{width:100%;min-width:0;box-sizing:border-box;min-height:44px;padding:9px;border:1px solid #ccdce7;border-radius:10px;font:inherit;background:#fff;color:inherit}
.slfApp button{min-height:44px;border:1px solid #bfd3e2;border-radius:10px;background:#edf5fa;padding:10px 15px;font:inherit;color:#244967;cursor:pointer}.slfApp button:disabled{opacity:.5;cursor:default}.slfApp .chatButton{background:#247da9;color:white}.slfApp .slfStop{background:#b52d48;color:white;margin:18px 0}
.slfApp fieldset{border:1px solid #d9e5ed;border-radius:12px;margin:12px 0;padding:12px;min-width:0}.slfApp legend{font-weight:700}.slfApp .slfCategory{display:inline-flex;align-items:center;margin:6px 10px 6px 0}.slfApp input[type=checkbox]{width:22px;height:22px;flex:none;accent-color:#247da9}
.slfRooms{display:grid;gap:12px;margin-top:14px}.slfRooms button{width:100%;text-align:left;overflow-wrap:anywhere}.slfRooms small{display:block;color:var(--game-heading)}.chatGame .slfRooms button[aria-current]{border-color:#2677a8;background:#edf6fb;box-shadow:inset 0 0 0 1px #2677a8}.slfAnswers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}.slfAnswers button{align-self:end;margin:10px 0}.slfStatus{font-weight:700}.slfClock{font-size:28px;font-weight:700;color:#247da9;font-variant-numeric:tabular-nums;margin:12px 0}.slfPlayers ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}.slfPlayers li{padding:8px;background:#edf5fa;border-radius:8px;font-size:14px}
.slfApp .slfAnswerRow{display:flex;align-items:center;gap:10px;border-bottom:1px solid #e3ebf0;padding:10px 0;overflow-wrap:anywhere}.slfAnswerRow>span:first-child{flex:1;min-width:0}.slfAnswerRow strong{white-space:nowrap;font-size:14px}.slfInvalid{color:#a32b43}.slfMessage{margin-top:18px;overflow-wrap:anywhere}.slfApp details:not(.chatCard) summary{cursor:pointer;min-height:44px;padding:10px 0}
@media (max-width:1100px) { .unknownApp{grid-template-columns:minmax(240px,1fr) minmax(320px,1.6fr)}.unknownRight{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.slfApp{grid-template-columns:minmax(220px,1fr) minmax(0,2fr)}.slfApp>.miniResults{grid-column:1/-1} }
@container chat-content (max-width:1100px) { .unknownApp{grid-template-columns:minmax(240px,1fr) minmax(320px,1.6fr)}.unknownRight{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.slfApp{grid-template-columns:minmax(220px,1fr) minmax(0,2fr)}.slfApp>.miniResults{grid-column:1/-1} }
@media (max-width:700px) { .unknownApp{grid-template-columns:minmax(0,1fr)}.unknownRight{grid-column:auto;grid-template-columns:minmax(0,1fr)}.unknownPlay{grid-row:1}.unknownApp .chatCard{padding:18px}.slfApp{grid-template-columns:minmax(0,1fr)}.slfPlay{grid-row:1}.slfAnswers{grid-template-columns:minmax(0,1fr)}.slfApp .chatCard{padding:18px} }
@container chat-content (max-width:700px) { .unknownApp{grid-template-columns:minmax(0,1fr)}.unknownRight{grid-column:auto;grid-template-columns:minmax(0,1fr)}.unknownPlay{grid-row:1}.unknownApp .chatCard{padding:18px}.slfApp{grid-template-columns:minmax(0,1fr)}.slfPlay{grid-row:1}.slfAnswers{grid-template-columns:minmax(0,1fr)}.slfApp .chatCard{padding:18px} }

/* Community games use the same heading, secondary action and status hierarchy. */
.chatGame :is(.unknownApp,.slfApp) h2{font-size:22px;font-weight:750;line-height:1.3;letter-spacing:-.3px;color:var(--game-heading);margin:0 0 14px;overflow-wrap:anywhere}
.chatGame :is(.unknownApp,.slfApp) h3{font-size:18px;line-height:1.4;color:var(--game-heading)}
.chatGame :is(.unknownApp,.slfApp) button:not(.chatButton,.unknownRole,.slfStop,.chatBoxToggle,.miniWaitingJoin,.miniWaitingCancel){border-color:#ccd9e2;border-radius:10px;background:#f7f9fb;color:var(--game-heading);box-shadow:none}
.chatGame :is(.unknownApp,.slfApp) button:not(.chatButton,.unknownRole,.slfStop,.chatBoxToggle,.miniWaitingJoin,.miniWaitingCancel):enabled:hover{border-color:#aacbdc;background:#eaf4fa}
.chatGame :is(.unknownApp,.slfApp) button:disabled{background:#edf0f3!important;border-color:#d5dde4!important;color:#7a8793!important;box-shadow:none;opacity:1;cursor:not-allowed}
.chatGame :is(.unknownMessage,.slfMessage):not(:empty){margin-top:18px;padding:12px 14px;border:1px solid var(--chat-border);border-radius:10px;background:#f5f8fb;color:var(--chat-ink);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.chatGame :is(.unknownMessage,.slfMessage):empty{display:none}
.chatGame :is(.unknownApp,.slfApp,.anagramApp) input:not([type=checkbox]):not([type=radio]):focus-visible,.chatGame :is(.unknownApp,.slfApp) select:focus-visible{border-color:var(--chat-blue);outline:3px solid #2677a826;outline-offset:0}

/* Städtekette app mode: one compact header, newest complete rows; no game scrolling. */
.chatAppStart{margin-top:12px;border:1px solid #b5cfdf;border-radius:9px;padding:9px 14px;min-height:44px;background:#fff;color:#265470;font:inherit;font-size:15px;cursor:pointer}
.chatGame :is(.chatSoundToggle,.chatResetToggle){display:inline-grid;place-items:center;width:44px;height:44px;margin:12px 0 0 6px;vertical-align:bottom;padding:0;border:1px solid #b5cfdf;border-radius:9px;background:#fff;color:#265470;cursor:pointer}
.chatGame :is(.chatSoundToggle,.chatResetToggle) svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chatGame .chatSoundToggle[aria-pressed="false"]{color:var(--chat-muted)}
.chatGame :is(.chatSoundToggle,.chatResetToggle):disabled{opacity:.65;cursor:wait}
.chatGame :is(.chatSoundToggle,.chatResetToggle):focus-visible{outline:2px solid var(--chat-blue);outline-offset:2px}
.chatSoundStatus:not(:empty){display:block;margin-top:4px;font-size:13px;color:#8d2c42}
.chatAppStart[hidden]+.chatSoundToggle,.chatAppStart[hidden]~.chatSoundStatus{display:none}
html.chatAppMode,body.chatAppMode{overflow:hidden!important;overscroll-behavior:none}.chatAppNativeHidden{display:none!important}
/* Keep the native site footer and scroll control out of the app viewport. */
html.chatAppMode :is(#pageFooter,.pageFooter,.pageActionButtonToTop){display:none!important}
.chatGame.chatAppActive{position:fixed!important;z-index:200;top:var(--chat-app-top,0px);left:0;right:0;width:100%;height:var(--chat-app-height,100dvh);max-width:none!important;margin:0!important;padding:0!important;box-sizing:border-box;background:#fff;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;overflow:clip;container-type:normal;color:#162f49;font-size:16px}
.chatGame.chatAppActive:has(>.chatAppGameTitleBox){grid-template-rows:auto auto minmax(0,1fr) auto}
.chatAppActive .chatAppGameTitleBox{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px}
.chatAppActive>.chatAppGameTitleBox{margin:8px 8px 0;padding:5px 12px;min-height:44px;border-radius:10px;background:#e4f2ff}
.chatAppActive .chatAppGameTitleBox>.chatAppGameHeading{flex:1 1 0;min-width:0}
.chatAppActive .chatAppGameTitleBox>:is(.chatSoundToggle,.chatResetToggle){flex:none;margin:0;border:0;background:transparent}
.chatAppActive .chatAppGameTitleBox>.chatSoundStatus:empty{display:none}
.chatAppActive .chatAppGameTitleBox>.chatSoundStatus:not(:empty){flex-basis:100%;margin:0}
@media(max-height:419px){
 .chatAppActive>.chatAppGameTitleBox{margin-top:4px;padding-block:0;min-height:36px}
 .chatAppActive .chatAppGameTitleBox>.chatAppGameHeading{font-size:18px}
 .chatAppActive .chatAppGameTitleBox>:is(.chatSoundToggle,.chatResetToggle){height:36px}
}
.chatAppActive>.chatHero,.chatAppActive>.gameSchedule,.chatAppActive>script{display:none!important}
.chatAppToolbar{display:grid;grid-template-columns:44px minmax(0,1fr) 56px 56px;align-items:center;gap:6px;min-width:0;padding:4px 8px;border-bottom:1px solid #ffffff33;background:var(--wcfHeaderBackground,#2e4e6d);color:#fff}
.chatAppToolbar .chatAppTitle{font-size:clamp(15px,4.2vw,18px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding-left:3px;color:#fff;font-weight:800;letter-spacing:.01em}
.chatAppToolbar button{min-height:44px;padding:3px;border:0;border-radius:10px;background:transparent;box-shadow:none;color:#fff;font:inherit;cursor:pointer}.chatAppToolbar .chatAppLogo{height:44px;min-height:44px;display:grid;place-items:center;width:44px;background:transparent;border:0;color:#fff;font-size:20px;font-weight:800;border-radius:0;overflow:hidden;padding:0}
.chatAppToolbar button:not(.chatAppLogo){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.chatAppToolbar button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.chatAppToolbar button span{font-size:10px;white-space:nowrap}.chatAppToolbar button[aria-expanded=true]{background:#ffffff30}
.chatAppMenu{position:absolute;z-index:25;right:8px;top:68px;display:grid;min-width:190px;max-width:calc(100% - 16px);max-height:calc(var(--chat-app-height,100dvh) - 84px);overflow:auto;background:#fff;border:1px solid #c7d6e2;border-radius:12px;box-shadow:0 8px 24px #18364c26;padding:5px}.chatAppMenu button,.chatAppMenu a{display:block;text-align:left;min-height:44px;padding:12px;border:0;border-radius:7px;color:#173d59;background:#fff;font:inherit;font-size:15px;text-decoration:none;box-sizing:border-box}.chatAppMenu button:hover,.chatAppMenu a:hover{background:#edf5fc}
.chatAppActive>.chatLayout{display:block!important;position:relative;min-width:0;min-height:0;padding:0!important;margin:0!important;overflow:clip;border:0!important;border-radius:0!important;background:#fff}
.chatAppActive .chatLayout>.chatLeft,.chatAppActive .chatLayout>.chatRight{display:none!important}
.chatAppActive .chatLayout>.chatCenter{height:100%;min-height:0;width:100%;margin:0;border:0;border-radius:0;padding:8px;display:flex;flex-direction:column;box-sizing:border-box;box-shadow:none;container-type:normal}
.chatAppActive .chatState{display:block!important;flex:none;padding:0;margin:0 0 8px;min-height:0}.chatAppActive .chatCurrent{min-height:58px;padding:8px 12px;border-radius:10px;gap:10px;background:#e4f2ff}.chatAppActive .chatPinBadge,.chatAppActive .chatCount{display:none!important}.chatAppActive .chatCurrentText strong{font-size:24px;line-height:1.2}.chatAppActive .chatCurrentText>span,.chatAppActive .chatLetterWrap>span{font-size:12px}.chatAppActive .chatLetterWrap{gap:8px;padding-left:12px;border-left:1px solid #bad1e4}.chatAppActive .chatLetterWrap strong{width:40px;height:40px;font-size:27px;border:0;border-radius:9px;color:#fff;background:#086bb8}.chatAppActive #cityChainLetterLabel{font-size:0}.chatAppActive #cityChainLetterLabel::after{content:'Weiter mit';font-size:12px}
:is(.chatAppActive,.chatCurrentShowsTitle) :is(#cityChainCurrentLabel,#cityChainCurrentWord){display:none}
:is(.chatAppActive,.chatCurrentShowsTitle) .chatAppGameHeading{margin:0;color:inherit;font-size:24px;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.chatAppActive .chatConversation{display:flex;flex-direction:column;flex:1;min-height:0;margin:0;padding:0;container-type:normal;overflow:clip;border:0;border-radius:0}.chatAppActive .chatMessages{position:relative;height:auto!important;min-height:0;flex:1;overflow:clip!important;overscroll-behavior:none;scroll-behavior:auto;padding:0;border:1px solid #d7e2ed;border-radius:12px;box-sizing:border-box}.chatAppActive .cityChainEntries{display:flex;flex-direction:column;gap:0;padding:0;margin:0;min-height:0}.chatAppActive .chatEntry{display:grid;grid-template-columns:42px minmax(52px,.55fr) minmax(0,1.45fr) 18px;gap:8px;min-height:74px;margin:0;padding:10px 8px;border-bottom:1px solid #dfe7ef;border-radius:0;font-size:15px;box-sizing:border-box}.chatAppActive .chatEntry.isLatest{background:#e4f2ff;border-radius:10px}.chatAppActive .chatEntry.cityChainError{background:#fff0f3}.chatAppActive .chatAuthorAvatar{width:42px;height:42px;font-size:17px}.chatAppActive .chatAuthorMeta{font-size:14px}.chatAppActive .chatAuthorMeta time{font-size:12px}.chatAppActive .chatAuthorName{font-size:12px;font-weight:400}.chatAppActive .chatAuthorName a{color:#102944}.chatAppActive .chatAuthorDetails{font-size:11px}.chatAppActive .chatBubble{padding:7px 9px;gap:7px;font-size:16px;border-radius:10px}.chatAppActive .chatBubble strong{font-size:16px}.chatAppActive .chatVerdict{font-size:18px;width:21px;height:21px;min-width:21px}.chatAppActive .chatEmpty{font-size:14px;margin:0;min-height:0;padding:16px;gap:8px}.chatAppActive .chatEmpty strong{font-size:18px}.chatAppActive .chatEmpty .chatIcon{width:36px;height:36px}.chatAppNoRoom{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:5px;font-size:12px;text-align:center;color:#536c7d}
.chatAppActive .chatComposer{--chat-control-font-size:16px;flex:none;margin:0;gap:8px}.chatAppActive .chatInputWrap{height:50px;min-height:50px;padding:5px 9px;gap:8px;border-radius:10px}.chatAppActive .chatInputWrap input{min-width:0}.chatAppActive .chatInputWrap>.chatIcon{width:25px;height:25px}.chatAppActive .chatCharacterCount{font-size:13px}.chatAppActive .chatComposer>.chatButton{width:50px;height:50px;min-height:50px;padding:10px}.chatAppActive .chatComposer>.chatButton .chatIcon{width:27px;height:27px}.chatAppActive .chatInputHint{display:none}.chatAppTurn{flex:none;margin:8px 0;font-size:13px;font-weight:600;line-height:1.3;color:#183e64}.chatAppActive .chatNotice{flex:none;margin:2px 0;font-size:12px;line-height:1.3;max-height:36px;overflow:auto}.chatAppActive .chatNotice:empty{display:none}.chatAppActive .chatGuest{flex:none;margin:6px 0 0;padding:8px;font-size:12px;max-height:60px;overflow:auto}
.chatAppFooter{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 0 max(3px,env(safe-area-inset-bottom));gap:2px;background:#fff;border-top:1px solid #dce6ed;overflow:hidden}.chatAppFooter>span{font-size:10px;line-height:12px;color:#687b88}.chatAppAd{width:320px;height:50px;min-width:320px;min-height:50px;box-sizing:border-box;background:#f0f2f5}
.chatAppActive:is(.chatAppPanel-rules,.chatAppPanel-players) .chatLayout>.chatLeft,.chatAppActive:is(.chatAppPanel-scores,.chatAppPanel-most-used) .chatLayout>.chatRight{display:block!important;position:absolute;inset:0;background:#f5f9fc;padding:64px 10px 10px;overflow:auto;z-index:5;box-sizing:border-box}.chatAppActive .chatLeft>*,.chatAppActive .chatRight>*{display:none!important}.chatAppActive.chatAppPanel-rules .chatLeft>.chatRules,.chatAppActive.chatAppPanel-players .chatLeft>.chatParticipants,.chatAppActive.chatAppPanel-scores .chatRight>.chatInfo:has(.chatScoreList > li,.miniScoreList > li,#cityChainTeamWins),.chatAppActive.chatAppPanel-most-used .chatRight>.chatHistory{display:block!important;min-height:0}.chatAppBack{position:absolute;top:8px;left:10px;z-index:6;min-height:44px;padding:8px 12px;border:1px solid #bdd2e4;border-radius:9px;background:#fff;color:#245372;font:inherit;font-size:14px}
.chatAppActive .chatReportPanel{overflow:auto}.chatAppActive>.chatReportToast{position:absolute;top:68px;right:12px;left:12px;width:auto;min-width:0;max-width:450px}
.chatAppActive.chatAppShort .chatAppToolbar{padding:3px 6px;gap:5px;grid-template-columns:44px minmax(0,1fr) 56px 56px}.chatAppActive.chatAppShort .chatCurrent{min-height:34px;padding:2px 8px}.chatAppActive.chatAppShort .chatCurrentText>span{display:none}.chatAppActive.chatAppShort .chatAppGameHeading{font-size:18px}.chatAppActive.chatAppShort .chatLetterWrap strong{height:28px;width:28px;font-size:21px}.chatAppActive.chatAppShort .chatState{margin-bottom:4px}.chatAppActive.chatAppShort .chatEntry{min-height:56px;padding:6px 8px}.chatAppActive.chatAppShort .chatAuthorAvatar{height:34px;width:34px}.chatAppActive.chatAppShort .chatInputWrap,.chatAppActive.chatAppShort .chatComposer>.chatButton{height:44px;min-height:44px}.chatAppActive.chatAppShort .chatAppTurn{margin:3px 0;font-size:12px}

/* Four in a row: retain the live board; actions and lobby in a separate menu. */
.chatGame:is(.connectAppActive,.tttAppActive){top:0;height:100vh;height:100dvh}
.chatGame.connectAppActive>.chessApp{display:block!important;position:relative;min-height:0;min-width:0;margin:0;padding:0;overflow:clip}
.chatGame.connectAppActive .chessPlay{height:100%;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;padding:8px!important;margin:0;border:0;border-radius:0;box-shadow:none;overflow:clip}
.chatGame.connectAppActive .chessTitle{font-size:16px;line-height:1.25;margin:0 0 4px;overflow-wrap:anywhere}
.chatGame.connectAppActive .chessStatus{font-size:14px;line-height:1.3;min-height:0;margin:0 0 6px}
.chatGame.connectAppActive .connectColumns{flex:none;width:var(--connect-app-board);max-width:100%;margin:0 auto 4px}
.chatGame.connectAppActive .connectColumn{height:40px;min-height:0;padding:2px;font-size:14px}
.chatGame.connectAppActive .connectBoard{flex:none;width:var(--connect-app-board);max-width:100%;height:auto;margin:0 auto;box-sizing:border-box;border-width:5px;border-radius:10px;gap:0}
.chatGame.connectAppActive .connectCell{min-height:0;min-width:0;padding:0;aspect-ratio:1}
.chatGame.connectAppActive .chessMessage{flex:none;min-height:0;max-height:42px;overflow:auto;font-size:12px;line-height:1.25;padding:4px 7px;margin:6px 0 0!important;border-radius:7px}
.chatGame.connectAppActive .chessMessage:empty{display:none}.chatGame.connectAppActive .chessMessage::before{display:none}
.chatGame.connectAppActive .chessMoves{display:none}
:is(.connectAppDrawer,.tttAppDrawer){position:absolute;z-index:20;inset:0;padding:10px;overflow:auto;overscroll-behavior:contain;background:#f4f8fc;box-sizing:border-box}
:is(.connectAppDrawer,.tttAppDrawer)>button{min-height:44px;padding:10px 12px;border:1px solid #bfd3e0;border-radius:10px;background:white;color:#244d69;font:inherit}
:is(.connectAppDrawer,.tttAppDrawer)>h2{font-size:19px;margin:16px 0 8px}.chatGame.connectAppActive .connectAppDrawer .chessLobby{display:grid;margin-top:20px}.connectAppDrawer .chessToolbar{margin:0}.connectAppDrawer .chessLobby .chatCard{padding:16px}

.chatGame .tttControls button{min-height:44px}

.chatAppToolbar .chatAppExit>span:first-child{font-size:24px;line-height:22px}.chatAppToolbar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.chatAppToolbar[tabindex="-1"]:focus{outline:none}
.chatAppToolbar > .chatAppSwitch{-webkit-tap-highlight-color:transparent}
.chatGame .chatAppToolbar > .chatAppSwitch:is(.chatAppSwitchPointer,:active,:focus:not(:focus-visible)){outline:none}
.chatGame .tttSoloChoice{display:grid;gap:6px;margin-top:16px;font-size:14px}.chatGame .tttSoloStarter{width:100%;min-height:44px;padding:8px;border:1px solid #cbdbe6;border-radius:10px;background:#fff;font:inherit;color:inherit}

/* Kreis und Kreuz follows the common app header/menu contract. */
.chatGame.tttAppActive>.tttApp{display:block!important;position:relative;min-height:0;min-width:0;margin:0;padding:0;overflow:clip}
.chatGame.tttAppActive .tttPlay{height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;padding:8px!important;margin:0;border:0;border-radius:0;box-shadow:none;overflow:clip}
.chatGame.tttAppActive .tttPlay>h2,.gameAppActive .gameAppPlay>h2{display:none}
.chatGame.tttAppActive .tttPlayers,.chatGame.tttAppActive .tttStatus{font-size:14px;line-height:1.3;min-height:0;margin:0 0 6px;overflow-wrap:anywhere}
.chatGame.tttAppActive .tttGrid{flex:none;aspect-ratio:1;width:var(--ttt-app-board);max-width:100%;margin:0 auto;box-sizing:border-box;gap:6px}
.chatGame.tttAppActive .tttCell{min-height:0;min-width:0;padding:0;font-size:clamp(22px,9vh,64px);display:grid;place-items:center}
.chatGame.tttAppActive .tttMessage{flex:none;min-height:0;max-height:42px;overflow:auto;font-size:12px;line-height:1.25;padding:4px 7px;margin:6px 0 0!important;border-radius:7px}
.chatGame.tttAppActive .tttMessage:empty{display:none}.chatGame.tttAppActive .tttMessage::before{display:none}
.tttAppDrawer .tttLobby{display:grid;margin-top:20px}.tttAppDrawer .tttLobby .chatCard{padding:16px}

.chatAppToolbar .chatAppLogo img{display:block;max-width:100%;margin:0;border:0;border-radius:0}
.chatAppActive .chatAppToolbar.chatAppHasWordmark{grid-template-columns:minmax(0,1fr) 56px 56px;padding-block:3px 2px;padding-inline-start:10px}
.chatAppToolbar.chatAppHasWordmark .chatAppLogo{width:100%;align-self:start;justify-items:start}
.chatAppToolbar.chatAppHasWordmark .chatAppTitle{display:none}
.chatAppActive .chatAppToolbar:has(>.chatAppSwitch){grid-template-columns:44px minmax(0,1fr) repeat(3,56px)}
.chatAppActive .chatAppToolbar.chatAppHasWordmark:has(>.chatAppSwitch){grid-template-columns:minmax(0,1fr) repeat(3,56px)}
.chatAppGameSwitch{position:fixed;inset:0;width:min(440px,calc(100% - 24px));max-height:calc(100dvh - 24px);box-sizing:border-box;margin:auto;padding:16px;border:1px solid #cfdeea;border-radius:16px;background:#fff;color:#243b50;box-shadow:0 12px 38px #18364c36;overflow:hidden}
.chatAppGameSwitch[open]{display:flex;flex-direction:column;gap:12px}
.chatAppGameSwitch::backdrop{background:#172c4266}
.chatAppGameSwitch h2{min-height:32px;margin:0 44px 0 0;font-size:20px;line-height:32px;color:#243f5b}
.chatAppGameSwitch input{box-sizing:border-box;width:100%;min-height:44px;padding:8px 12px;border:1px solid #bdcfdc;border-radius:9px;background:#f6f9fc;color:inherit;font:inherit;font-size:16px}
.chatAppGameSwitch ul{min-height:0;overflow:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:3px}
.chatAppGameSwitch li+li{margin-top:4px}
.chatAppSwitchItem{display:flex;align-items:center;min-height:44px;padding:6px 10px;border-radius:8px;color:inherit;overflow-wrap:anywhere}
.chatAppSwitchItem:hover{background:#eaf4fb}
.chatAppGameSwitch :is(a,button,input):focus-visible{outline:2px solid #1676a4;outline-offset:2px}
.chatAppSwitchEmpty{margin:0 0 6px}
.chatGame :is(.soloStart,.tttSolo){margin:10px 0 0;min-height:44px}
.chatGame .soloOption{display:grid;gap:6px;margin-top:14px;font-size:14px}.chatGame .dotsSoloStarter{width:100%;min-height:44px;padding:8px;border:1px solid #cbdbe6;border-radius:10px;background:#fff;color:inherit;font:inherit}
.chatGame .battleSoloStarter{width:100%;min-height:44px;padding:8px;border:1px solid #cbdbe6;border-radius:10px;background:#fff;color:inherit;font:inherit}
.chatGame .soloOption input[type=checkbox]{width:20px;height:20px}.chatGame .connectSoloStarter{width:100%;min-height:44px;padding:8px;border:1px solid #cbdbe6;border-radius:10px;background:#fff;color:inherit;font:inherit}
.sudokuGrid.sudokuSolo .sudokuCell,.sudokuGrid.sudokuSolo+.sudokuDigits button{display:grid;place-items:center;text-align:center}


/* Shared app contract for all current and future game renderers. */
.chatGame.connectAppActive .chessBoard:not(.connectBoard){flex:none;width:var(--connect-app-board);max-width:100%;aspect-ratio:1;margin:0 auto;box-sizing:border-box}
.chatGame.connectAppActive .chessSquare{min-height:0;min-width:0;padding:0;font-size:clamp(16px,5vh,44px)}
.chatGame.gameAppActive>.gameAppBody{display:block!important;position:relative;min-height:0;min-width:0;padding:0;margin:0;overflow:clip}
.gameAppActive .gameAppPlay{height:100%;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;padding:8px!important;margin:0;border:0;border-radius:0;box-shadow:none;overflow:clip;gap:5px}
.gameAppActive .gameAppBody>aside{display:none!important}
.gameAppActive .gameAppPlay>p{font-size:13px;line-height:1.25;margin:0;flex:none}
.gameAppActive .gameAppPlay>p:empty{display:none}
.gameAppDrawer{position:absolute;z-index:20;inset:0;overflow:auto;padding:10px;box-sizing:border-box;background:#f4f8fc}
.gameAppDrawer>button{min-height:44px;padding:10px 12px;border:1px solid #bfd3e0;border-radius:10px;background:white;color:#244d69;font:inherit}
.gameAppDrawer>h2{font-size:19px;margin:14px 0 10px}
.gameAppDrawer aside{display:grid!important;gap:12px;margin:0}
.gameAppDrawer .gameSchedule:not([hidden]){display:block!important}
.chatAppActive :has(> .gameAppStartLobby) > :is(.chessPlay,.tttPlay,.gameAppPlay){visibility:hidden}
.gameAppStartLobby > :is(button,h2),.chatAppActive .gameAppStartLobby :is(.miniResults,.gameScheduleLobby){display:none!important}
.chatGame.chatAppActive .gameAppStartLobby :is(.chessLobby,.tttLobby){margin-top:0}
.chatGame .gameSchedule[hidden]{display:none!important}
.gameAppActive .sudokuGrid{width:var(--game-app-board);height:var(--game-app-board);flex:none;max-width:100%;margin:0 auto}
.gameAppActive .sudokuCell{font-size:clamp(14px,3vh,24px)}
.gameAppActive .sudokuDigits{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;margin:2px 0}
.gameAppActive .sudokuDigits button{padding:0;min-height:32px;font-size:18px}
.gameAppActive .dotsScroll{width:var(--game-app-board);height:var(--game-app-board);flex:none;max-width:100%;overflow:clip;margin:0 auto;padding:0}
.gameAppActive .dotsGrid{width:100%;height:100%;grid-template-columns:repeat(calc(var(--dots-size) - 1),8px minmax(0,1fr)) 8px;grid-template-rows:repeat(calc(var(--dots-size) - 1),8px minmax(0,1fr)) 8px}
.gameAppActive .dotsGrid>*{min-width:0;min-height:0}
.gameAppActive .dotsHint{display:none}
.gameAppActive .hmDrawing{height:auto;min-height:25px;flex:1;max-height:145px;width:100%;margin:0}
.gameAppActive .hmKeyboard{width:100%;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:0 auto}
.gameAppActive button.hmKey{min-width:0;min-height:clamp(32px,6dvh,44px);padding:0;font-size:18px}
.gameAppActive .hmMask{font-size:18px;overflow-wrap:anywhere}
.gameAppActive .hmWordForm{font-size:13px}
.gameAppActive .hmWordForm input{min-height:36px;font-size:16px}
.gameAppActive .hmWordForm p{font-size:11px;margin:2px 0}
@media (max-height:520px){
 .gameAppActive .hangmanApp .gameAppPlay{gap:3px}
 .gameAppActive .hmDrawing{min-height:12px}
 .gameAppActive .hmKeyboard{gap:3px}
 .gameAppActive button.hmKey{min-height:26px;font-size:16px}
 .chatGame.gameAppActive .hangmanApp .tttMessage:not(:empty){margin:0!important;padding:4px 7px;font-size:12px;line-height:1.25}
 .gameAppActive .hangmanApp .tttMessage::before{display:none}
}
@media (max-height:520px) and (min-width:520px){
 .gameAppActive .hangmanApp .gameAppPlay:not(.chatReplayEnded){
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  grid-template-rows:repeat(3,auto) minmax(12px,1fr) repeat(6,auto);column-gap:12px
 }
 .gameAppActive .hangmanApp .gameAppPlay:not(.chatReplayEnded)>*{grid-column:1}
 .gameAppActive .hangmanApp .gameAppPlay:not(.chatReplayEnded)>.hmDrawing{grid-row:4;height:100%}
 .gameAppActive .hangmanApp .gameAppPlay:not(.chatReplayEnded)>.hmKeyboard{grid-area:1/2/-1/3;align-self:center}
}
.gameAppActive .battleBoards{display:grid;grid-template-columns:1fr 1fr;gap:7px;min-height:0;flex:1;align-items:center}
.gameAppActive .battleBoards>section{min-width:0;min-height:0}
.gameAppActive .battleBoards h3{font-size:13px;margin:0 0 4px;line-height:1.2}
.gameAppActive .battleGrid{gap:2px;padding:4px;max-height:100%;width:100%;margin:0;aspect-ratio:1}
.gameAppActive .battleCell{font-size:12px}
.gameAppActive .unknownCard{margin:0;padding:6px;font-size:15px}
.gameAppActive .unknownActions{font-size:14px;display:flex;flex-wrap:wrap;gap:6px;min-height:0}
.gameAppActive .unknownActions button{min-height:36px;padding:5px 8px;font-size:14px}
.gameAppActive .unknownActions input{min-height:36px;font-size:16px}
.gameAppActive .unknownPlay>h3{display:none}
.gameAppActive .battleBoards{display:block;flex:none;width:var(--game-app-board);height:var(--game-app-board);max-width:100%;margin:0 auto}
.gameAppActive .battleBoards h3{display:none}
.gameAppActive .battleGrid{width:100%;height:100%;box-sizing:border-box}
.gameAppSeaTabs{display:flex;gap:8px;flex:none}
.gameAppSeaTabs button{flex:1;min-height:36px;font:inherit;font-size:14px;border:1px solid #b6cfdf;border-radius:8px;background:#fff;color:#284b66}
.gameAppSeaTabs button[aria-pressed=true]{background:#dceeff;font-weight:700}
.chatGame.chatRule-five.chatAppActive .chatLetterWrap strong{width:auto;min-width:86px;padding:0 6px;font-size:17px;letter-spacing:2px;box-sizing:border-box}
.gameAppActive .dotsScroll{padding:6px;box-sizing:border-box}
.gameAppActive .dotsPoint{width:8px;height:8px}
.gameAppActive button.dotsHorizontal{width:100%;height:8px}
.gameAppActive button.dotsVertical{width:8px;height:100%}
.gameAppActive .dotsHorizontal .dotsHit{width:100%;height:44px}
.gameAppActive .dotsVertical .dotsHit{width:44px;height:100%}
.gameAppActive .dotsHorizontal .dotsHit:after{width:calc(100% - 4px);height:5px;left:2px;top:19px;transform:none}
.gameAppActive .dotsVertical .dotsHit:after{width:5px;height:calc(100% - 4px);left:19px;top:2px;transform:none}


.anagramApp .anagramLetters { overflow-wrap:anywhere; font-size:clamp(1.2rem,3vw,2rem); letter-spacing:.1em; text-align:center; padding:16px; border-radius:16px; background:var(--chat-panel-soft,#edf5fb); }
.anagramApp form { display:grid; gap:12px; margin:16px 0; }
.anagramApp form[hidden] { display:none; }
.anagramApp label { display:grid; gap:8px; }
.anagramApp input { min-width:0; width:100%; box-sizing:border-box; padding:12px; border:1px solid #bdd3e3; border-radius:12px; font:inherit; }
.chatGame .anagramApp .anagramWord{min-height:64px;border-radius:16px;background:var(--chat-panel-soft,#edf5fb);text-align:center;font-size:clamp(18px,2.5vw,28px);font-weight:700}
.chatAppActive .anagramApp .anagramWord{min-height:44px;font-size:18px}
.anagramHistory { --anagram-row-inset:12px; margin-inline:calc(-1 * var(--anagram-row-inset)); }
.chatGame .anagramHistory li { display:grid; gap:3px; padding:8px var(--anagram-row-inset); }
.anagramHistory li > span { color:var(--chat-muted); font-size:.82em; }
.chatAppActive .anagramApp .anagramLetters { padding:8px; margin:8px 0; }
.chatAppActive .anagramApp form { margin:6px 0; gap:6px; }
.chatAppActive .anagramApp .tttPlay > .tttPlayers,
.chatAppActive .anagramApp .tttPlay > .tttStatus,
.chatAppActive .anagramApp .anagramDeadline { margin:4px 0; }
.chatAppActive .anagramApp form { grid-template-columns:minmax(0,1fr) auto; align-items:end; }
.chatAppActive .anagramApp form > p { display:none; }
.chatAppActive .anagramApp .tttMessage { margin-top:6px; }
@media(max-height:419px){
 .gameAppActive .anagramApp .gameAppPlay{gap:4px}
 .gameAppActive .anagramApp .gameAppPlay>p{margin:0}
 .gameAppActive .anagramApp .anagramLetters{padding:4px;line-height:1.25}
 .gameAppActive .anagramApp form{margin:0}
 .gameAppActive .anagramApp label{gap:2px}
 .gameAppActive .anagramApp input{padding:6px 8px;font-size:16px}
 .chatGame.gameAppActive .anagramApp .tttMessage:not(:empty){margin:0!important;padding:4px 7px;font-size:12px;line-height:1.25}
 .gameAppActive .anagramApp .tttMessage::before{display:none}
}
.chatGame .chatReplay { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:16px 0 8px; }
.chatGame .chatReplayButton { flex-shrink:0; }
.chatGame .chatReplayHint { flex:1 1 220px; margin:0; font-size:.875rem; line-height:1.35; color:var(--chat-muted,#506477); }
.chatAppActive .chatReplay { margin:4px 0; gap:4px; }
.chatAppActive .chatReplayHint { display:none; }
.chatAppActive .hangmanApp .chatReplayEnded .hmKeyboard { display:none; }

/* Weekly ranking shares the existing overall ranking card and app-menu placement. */
.chatGame .chatWeekly{margin-top:18px;border-top:1px solid var(--chat-border);padding-top:8px}
.chatGame .chatWeekly>summary{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:17px;font-weight:700;color:var(--game-heading);cursor:pointer}
.chatGame .chatWeekly>p{font-size:13px;line-height:1.5;color:var(--chat-muted);margin:8px 0}
.chatGame .chatWeekly>button{min-height:44px;padding:9px 12px;border:1px solid var(--chat-border);border-radius:10px;background:#f7f9fb;color:var(--game-heading);font:inherit;font-size:14px}
.chatGame .chatWeekly>button:disabled{opacity:.55;cursor:wait}
.chatGame .chatWeekly .miniScoreList:empty{display:none}

/* chat-home-shared:start */
.gameProfileTrigger{cursor:pointer;color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}.gameProfileTrigger:focus-visible{outline:3px solid #e4a731;outline-offset:3px;border-radius:4px}
.gameProfilePreview{position:fixed;inset:auto;margin:0;padding:18px;border:1px solid #d9e3ec;border-radius:18px;background:#fff;color:#27323b;box-shadow:0 10px 32px #203d6324,0 2px 6px #203d6308;font:14px/1.45 Arial,sans-serif;max-height:calc(100dvh - 24px);overflow:auto;z-index:2147483646;box-sizing:border-box;text-align:left}.gameProfilePreview *{box-sizing:border-box}.gameProfilePreview::backdrop{background:transparent;pointer-events:none}
:is(.gameProfilePreview .gameProfileClose,.chatRatingPanel .chatRatingClose,.chatAppSwitchClose){position:absolute;right:8px;top:8px;display:flex;align-items:center;justify-content:center;appearance:none;float:none;margin:0;padding:0;min-width:0;min-height:0;width:40px;height:40px;border:1px solid #dfe6ec;border-radius:50%;background:#f4f6f8;box-shadow:none;color:#27323b;font-size:0;cursor:pointer}:is(.gameProfilePreview .gameProfileClose,.chatRatingPanel .chatRatingClose,.chatAppSwitchClose)::before,:is(.gameProfilePreview .gameProfileClose,.chatRatingPanel .chatRatingClose,.chatAppSwitchClose)::after{content:"";position:absolute;width:16px;height:2px;border-radius:2px;background:currentColor;transform:rotate(45deg)}:is(.gameProfilePreview .gameProfileClose,.chatRatingPanel .chatRatingClose,.chatAppSwitchClose)::after{transform:rotate(-45deg)}:is(.gameProfilePreview .gameProfileClose,.chatRatingPanel .chatRatingClose,.chatAppSwitchClose):hover{background:#e9eef2;border-color:#cbd7e0;color:#193d54}:is(.gameProfilePreview .gameProfileClose,.chatRatingPanel .chatRatingClose,.chatAppSwitchClose):focus-visible{outline:2px solid #2274a3;outline-offset:2px}
.gameProfileContent{padding:0}.gameProfileBody{display:grid;grid-template-columns:108px minmax(0,1fr);gap:14px;align-items:start}.gameProfileFace{width:108px;height:108px;border-radius:13px;background:#eaf2f8;display:grid;place-items:center;color:#315d7e;font-size:24px;font-weight:700;overflow:hidden}.gameProfileFace img{width:100%;height:100%;object-fit:cover;display:block}
.gameProfilePreview .gameProfileBody h2{font:700 20px/1.25 Arial,sans-serif;color:#284664;margin:0 36px 10px 0;padding:0;border:0;min-height:0;overflow-wrap:anywhere}.gameProfilePreview .gameProfileBody p{font:13px/1.45 Arial,sans-serif;margin:0;padding:0;color:#687782}.gameProfilePreview .gameProfileBody dl{display:grid;grid-template-columns:92px minmax(0,1fr);gap:4px 8px;float:none;width:auto;min-width:0;min-height:0;margin:0;padding:0;border:0;background:none}.gameProfilePreview .gameProfileBody dl>dt,.gameProfilePreview .gameProfileBody dl>dd{display:block;float:none;position:static;inset:auto;width:auto;min-width:0;max-width:none;height:auto;min-height:0;margin:0;padding:0;border:0;background:none;font:400 13px/1.45 Arial,sans-serif;text-align:left;overflow-wrap:anywhere}.gameProfilePreview .gameProfileBody dl>dt{color:#72818f}.gameProfilePreview .gameProfileBody dl>dd{color:#27323b}
.gameProfileFooter{border-top:1px solid #e8eef3;margin-top:14px;padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.gameProfilePoints{background:#f0f6fa;border-radius:9px;margin:0;padding:7px 10px;font:600 13px/1.45 Arial,sans-serif;color:#3b5d78}.gameProfilePreview .gameProfileOpen{display:inline-flex;align-items:center;justify-content:center;appearance:none;float:none;width:auto;min-height:36px;margin:0;padding:8px 13px;border:1px solid #236c99;border-radius:9px;background:#2677a8;box-shadow:0 1px 2px #1e52781a;color:#fff!important;text-decoration:none!important;font:600 13px/1.3 Arial,sans-serif;white-space:nowrap}.gameProfilePreview .gameProfileOpen:hover{background:#206993}.gameProfilePreview :focus-visible{outline:3px solid #e4a731;outline-offset:3px}
@media(max-width:440px){.gameProfilePreview{padding:16px;border-radius:16px}.gameProfileBody{grid-template-columns:96px minmax(0,1fr);gap:12px}.gameProfileFace{width:96px;height:96px;border-radius:11px}.gameProfilePreview .gameProfileBody h2{font-size:18px}.gameProfilePreview .gameProfileBody dl{grid-template-columns:92px minmax(0,1fr);gap:3px 7px}}
@media(pointer:coarse){:is(.gameProfilePreview .gameProfileClose,.chatRatingPanel .chatRatingClose,.chatAppSwitchClose){width:40px;height:40px;right:2px;top:2px}.gameProfilePreview .gameProfileOpen{min-height:40px}}
/* Decorative profile icons inherit the preview palette; no external image requests. */
.gameProfileIcon{display:inline-block;width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.gameProfilePreview .gameProfileBody dl>dt{display:flex;align-items:center;gap:5px}.gameProfilePoints{display:inline-flex;align-items:center;gap:6px}.gameProfilePreview .gameProfileOpen{gap:6px}

/* chat-home-shared:end */
.chatGame .chatRating{display:inline-flex;margin:0;padding:0;border:0;background:none}.chatRatingToggle{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:7px 12px;border:1px solid #ccdce7;border-radius:9px;background:#fff;color:#315d7e;font:600 13px/1.3 Arial,sans-serif;cursor:pointer}.chatRatingToggle:hover{background:#edf5fa}.chatRatingPanel{position:fixed;inset:auto;margin:0;padding:18px 14px 12px;border:1px solid #d9e3ec;border-radius:14px;background:#fff;color:#27323b;box-shadow:0 8px 28px #203d6326;box-sizing:border-box;max-height:calc(100dvh - 24px);overflow:auto;z-index:2147483646;font:14px/1.4 Arial,sans-serif}.chatRatingPanel::backdrop{background:transparent}.chatRatingPanel>p:first-of-type{display:flex;align-items:center;min-height:24px;margin:0 42px 8px 0;font:500 13px/1.4 Arial,sans-serif}.chatRatingStars{display:flex;justify-content:center;gap:4px}.chatGame .chatRatingStar{display:grid;place-items:center;appearance:none;padding:0;margin:0;width:44px;height:44px;min-height:0;border:0;border-radius:8px;background:transparent;box-shadow:none;color:#ad7500;font:30px/1 Arial,sans-serif;cursor:pointer}.chatGame .chatRatingStar:hover,.chatGame .chatRatingStar:focus-visible{background:#fff0c8}.chatGame .chatRatingStar:disabled{cursor:default;opacity:.5}.chatRatingPanel .chatRatingStatus{margin:8px 0 0;font-size:12px}.chatRatingStatus:empty{display:none}.chatRating :focus-visible:not(.chatRatingClose){outline:3px solid #e4a731;outline-offset:2px}.chatGame .chatReplayHint{flex-basis:100%}


/* Fix the app to the viewport even when the ad provider writes inline heights. */
.chatGame.chatAppActive{
 /* Ad scripts can set inline height:auto !important on ancestors. */
 min-height:var(--chat-app-height,100dvh);
 max-height:var(--chat-app-height,100dvh);
}
.chatAppActive>.chatAppFooter>.chatAppAd{
 --chat-app-ad-height:50px;
 position:relative;
 flex:none;
 min-height:var(--chat-app-ad-height);
 max-height:var(--chat-app-ad-height);
 overflow:hidden;
}
.chatAppAd>.chatAppBanner{display:block;width:100%;height:100%;border:0;margin:0;padding:0;overflow:hidden}
.chatAppActive>.chatAppFooter>.chatAppAd>.chatAppBanner{position:absolute;inset:0}
.chatAppActive>.chatAppFooter>.chatAppAd[data-ad-format="320x50"]:not([data-responsive-ad]){
 width:min(100%,320px);
 min-width:0;
}
.chatAppGameSubtitle{display:none}
.chatGame.chatAppActive:has(>.chatAppFooter > [data-ad-format="300x600"]){
 grid-template-columns:minmax(0,1fr) 300px;
 grid-template-rows:auto minmax(0,1fr);
 column-gap:12px;
 background:#edf5fb;
}
.chatGame.chatAppActive:has(>.chatAppGameTitleBox):has(>.chatAppFooter > [data-ad-format="300x600"]){
 grid-template-rows:auto auto minmax(0,1fr);
}
.chatAppActive:has(>.chatAppFooter > [data-ad-format="300x600"]) > :is(.chatAppToolbar,.chatAppGameTitleBox,.chatLayout,.chessApp,.tttApp,.gameAppBody){grid-column:1}
.chatAppActive:has(>.chatAppFooter > [data-ad-format="300x600"]) > .chatAppMenu{right:320px;max-width:calc(100% - 336px)}
.chatAppFooter:has(> [data-ad-format="300x600"]){
 grid-column:2;
 grid-row:1/-1;
 position:relative;
 align-self:center;
 max-height:100%;
 padding:0;
 border:0;
 border-radius:12px;
}
.chatAppFooter:has(> [data-ad-format="300x600"]) > span{
 position:absolute;
 inset-block-start:0;
 inset-inline-end:0;
 z-index:1;
 padding:4px 8px;
 border-end-start-radius:8px;
 background:#fff;
 pointer-events:none;
}
.chatAppAd[data-ad-format="300x600"]{width:300px;height:600px;min-width:0;min-height:0;max-height:100%}
.chatAppAd[data-ad-format="970x250"]{width:min(100%,970px);height:250px;min-width:0;min-height:0}
.chatAppActive>.chatAppFooter>.chatAppAd[data-ad-format="300x600"]{--chat-app-ad-height:min(600px,var(--chat-app-height,100dvh))}
.chatAppActive>.chatAppFooter>.chatAppAd[data-ad-format="970x250"]{--chat-app-ad-height:250px}
.chatAppActive>.chatAppFooter>.chatAppAd[data-responsive-ad]{
 --chat-app-ad-height:var(--chat-app-responsive-ad-height,50px);
 width:100%;
 min-width:0;
 max-width:100%;
}
.chatAppActive>.chatAppFooter>.chatAppAd[data-responsive-ad][data-ad-format="970x250"]{width:min(100%,970px)}
.chatAppActive>.chatAppFooter>.chatAppAd[data-responsive-ad]>.chatAppBanner{
 display:flow-root;
 inset:0 0 auto;
 height:auto!important;
 overflow:visible;
}
.chatAppFooter:has(> [data-ad-too-large]){padding:0;border:0;gap:0;visibility:hidden}
.chatAppFooter:has(> [data-ad-too-large])>span{display:none}
@media (any-pointer:coarse) and (min-width:700px) and (min-height:640px){
 .chatAppActive .chatAppToolbar button span{font-size:12px}
 .chatAppActive .chatAppGameSubtitle{display:block;flex:0 0 100%;margin:0 0 4px;font-size:13px;line-height:1.3;order:1}
 .chatAppActive.chatTheme-city .chatCurrent:has(> .chatAppGameTitleBox){
  background:#e4f2ff url('images/chat-skyline.svg') right bottom / min(58%,580px) auto no-repeat;
 }
}


/* Chain prompt belongs beside the input, in the user's reading/writing focus. */
.chatInputHasLetter>.chatIcon{display:none;}
.chatInputWrap>.chatComposerLetter{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:#e8f3fa;color:#284b68;font-size:24px;font-weight:800;line-height:1;}
.chatInputWrap>.chatComposerLetter[hidden]{display:none;}
.chatAppActive .chatInputWrap>.chatComposerLetter{flex-basis:30px;width:30px;height:30px;font-size:21px;border-radius:8px;}


/* Shared ranking identities: compact images for members; guest rows stay anonymous. */
.chatGame .chatScoreIdentity{min-width:0;flex:1;}
.chatGame .chatScoreIdentity>a,.chatGame .chatScoreIdentity>span{display:flex;align-items:center;gap:9px;min-width:0;}
.chatGame .chatScoreIdentity>a>span:last-child,.chatGame .chatScoreIdentity>span>span:last-child{min-width:0;overflow-wrap:anywhere;}
.chatGame .chatScoreAvatar{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:8px;overflow:hidden;background:#e4f1fa;color:#315d7b;font-size:12px;font-weight:700;line-height:1;}
.chatGame .chatScoreAvatar img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:inherit;margin:0;padding:0;}


/* Shared card titles for native disclosures and sidebar sections. */
.chatGame{--chat-box-title-size:21px;--chat-box-title-gap:12px}
.chatGame :is(.chatCard>summary,.chatCard>h2:has(>.chatBoxToggle),aside>.chatCard>h2,.gameSchedule.chatCard>h2){
 display:flex;align-items:center;gap:var(--chat-box-title-gap);color:var(--game-heading);
 font-size:var(--chat-box-title-size);font-weight:750;line-height:1.2;letter-spacing:-.35px;
 overflow-wrap:anywhere
}
/* Decorative title icons are hidden on all cards; the disclosure arrow is functional. */
.chatGame .chatCard>:is(summary,h2)>.chatIcon,
.chatGame .chatCard>h2>.chatBoxToggle>.chatIcon{display:none!important}
.chatGame.chatAppActive{--chat-box-title-size:17px;--chat-box-title-gap:10px}

/* Compact scheduling card and independent lobby rules. */
.gameSchedule>.gameScheduleChoice{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.gameScheduleChoice label{width:100%;font-size:14px}
.gameScheduleChoice select,.gameSchedulePlan{width:100%;min-width:0}
.gameStartImmediate{display:grid;gap:12px;margin-top:12px}
.gameStartImmediate>form{margin:0}
.gameStartImmediate>.chatButton{width:100%}
.chatGame :is(.gameScheduleHelp,.gameScheduleMessage){margin:10px 0;font-size:13px;line-height:1.4}
.gameScheduleMessage:empty{display:none}
.chatGame details.chatCard.gameLobbyRules{padding:0;margin:0}
.chatGame .gameLobbyRules .chatSteps p{white-space:pre-line;overflow-wrap:anywhere}
.chatGame :is(details.chatCard,.gameScheduleLobby,.chatWeekly)>summary{display:flex;align-items:center}
.chatGame .chatBoxToggle{
 display:flex;align-items:center;gap:inherit;width:100%;padding:0;border:0;background:none;
 color:inherit;font:inherit;letter-spacing:inherit;text-align:start;overflow-wrap:anywhere
}
.chatGame .chatBoxCollapsed>:not(h2){display:none}
/* Geschlechterkampf zeigt die Punktewertung auch vor dem ersten Zug. */
.chatGame :is(.miniScores,.chatInfo):not(:has(.miniScoreList > li,.chatScoreList > li,#cityChainTeamWins)),
.chatGame:not(:has(.miniScores .miniScoreList > li,.chatInfo :is(.chatScoreList,.miniScoreList) > li,#cityChainTeamWins)) .chatAppScoresMenu{
 display:none!important
}
.chatGame section.chatCard:has(> :is(.miniWaitingList,.unknownRooms,.slfRooms,.chessFinishedList,.battleFinished,.sudokuFinished,.tttFinished)):not(:has(> :is(.miniWaitingList,.unknownRooms,.slfRooms,.chessFinishedList,.battleFinished,.sudokuFinished,.tttFinished) [data-match])){
 display:none
}
.chatGame :is(details.chatCard,.gameScheduleLobby,.chatWeekly)>summary::after,
.chatGame .chatBoxToggle::after{
 content:"";flex:none;width:10px;height:10px;margin-inline-start:auto;margin-inline-end:4px;
 border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;
 transform:translateY(-2px) rotate(45deg)
}
.chatGame :is(details.chatCard,.gameScheduleLobby,.chatWeekly)[open]>summary::after,
.chatGame .chatBoxToggle[aria-expanded=true]::after{transform:translateY(2px) rotate(225deg)}


/* One waiting-room card: creator preview, clear join action and own cancellation. */
.chatGame .miniWaitingList{container:waiting-list / inline-size}
.chatGame .miniWaitingCard{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;margin:10px 0;border:1px solid #b7d6e8;border-radius:14px;background:linear-gradient(120deg,#edf7fc,#e7f2fb);box-shadow:0 2px 5px #2846640a;min-width:0}
.chatGame .miniWaitingCard.miniWaitingOwn{border-color:#2677a8;box-shadow:inset 0 0 0 1px #2677a8}
.miniWaitingCard::before{content:"";grid-area:1/1;width:48px;height:48px;border-radius:9px;background:#dfedf7;box-shadow:inset 0 0 0 1px #cbdfea}
.miniWaitingDescription{grid-area:1/2;min-width:0;color:#27323b;font-size:15px;line-height:1.4;overflow-wrap:anywhere}.miniWaitingDescription small{display:block;margin-top:4px;color:#687b89;font-size:13px}.miniWaitingDescription .gameProfileTrigger{font-weight:700;text-decoration:none}
.chatGame .miniWaitingCard .miniWaitingProfile{grid-area:1/1;z-index:1;padding:0;border:0;margin:0;width:48px;min-width:0}.miniWaitingCard .miniProfileLink{display:block;width:48px;padding:0;margin:0}.miniWaitingCard .miniProfileLink>span:last-child{display:none}.miniWaitingCard .miniProfileAvatar{display:grid;place-items:center;width:48px;height:48px;border-radius:9px;overflow:hidden}.miniWaitingCard .miniProfileAvatar img{width:100%;height:100%;object-fit:cover;display:block}
.chatGame .miniWaitingCard>button.miniWaitingJoin{grid-area:2/2/auto/-1;justify-self:start}
.chatGame .miniWaitingCard :is(button,a).miniWaitingJoin{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;width:auto;max-width:100%;min-height:40px;margin:0;padding:9px 13px;border:1px solid #1376ac;border-radius:10px;background:linear-gradient(135deg,#238cc2,#086da8);box-shadow:0 2px 4px #24587a1a;color:#fff;font:700 14px/1.2 Arial,sans-serif;text-align:center;cursor:pointer}.chatGame .miniWaitingCard :is(button,a).miniWaitingJoin:hover{background:linear-gradient(135deg,#187fb5,#086c9e)}.chatGame .miniWaitingCard>button.miniWaitingJoin[hidden]{display:none!important}.chatGame .miniWaitingCard .miniWaitingJoin:disabled{opacity:.55;cursor:default}
.chatGame .miniWaitingCard>button.miniWaitingCancel{display:grid;place-items:center;min-width:0;margin:0;border:1px solid #a62339;border-radius:10px;background:linear-gradient(135deg,#d34054,#af243c);box-shadow:0 2px 4px #77233526;color:#fff;font:700 22px/1 Arial,sans-serif;cursor:pointer}
.chatGame .miniWaitingCard>button.miniWaitingCancel:hover:not(:disabled){background:linear-gradient(135deg,#bd3045,#991f34)}
.chatGame .miniWaitingCard>button.miniWaitingCancel:disabled{opacity:.55;cursor:default}
.miniWaitingJoin:focus-visible,.miniWaitingCancel:focus-visible{outline:3px solid #e4a731;outline-offset:2px}
@container waiting-list (min-width:380px){
 .chatGame .miniWaitingCard>button.miniWaitingJoin{grid-area:1/3}
}

.chatGame .miniWaitingList>.miniWaitingCard{margin:0;padding:10px;gap:10px}
.chatGame .miniWaitingCard>button:is(.miniWaitingJoin[data-waiting-action=join],.miniWaitingCancel){grid-area:1/3;justify-self:end;width:44px;height:44px;min-height:44px;padding:0}

.chatGame .gameScheduleItem{grid-template-columns:48px minmax(0,1fr);gap:9px 12px}
.gameScheduleFace{grid-area:1/1;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:9px;overflow:hidden;color:#315d7b;font-weight:700}
.gameScheduleFace img{display:block;width:100%;height:100%;object-fit:cover}
.gameScheduleItem time{display:block;font-weight:700}
.chatGame .gameScheduleItem p{margin:3px 0 0}
.gameScheduleActions{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.gameScheduleActions>*{max-width:100%;min-height:40px;white-space:normal;overflow-wrap:anywhere}

.miniWaitingJoin[data-waiting-action=join]::before{content:"";display:block;width:20px;height:20px;flex:0 0 20px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13%207a4%204%200%201%201-8%200%204%204%200%200%201%208%200ZM2%2021v-2a7%207%200%200%201%2014%200v2Zm17-13v8m-4-4h8%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}

.chatBubble :is(.chatTermCount,.chatErrorExplanation){flex:0 1 auto;color:var(--chat-muted);font-size:.72em;line-height:1.2}
.chatAppActive .chatBubble:has(> .chatTermCount),.chatGame .chatBubble:has(> .chatErrorExplanation){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 7px}
.chatAppActive .chatBubble > .chatTermCount,.chatBubble > .chatErrorExplanation{grid-column:1/-1;overflow-wrap:anywhere}


.chatGame .chatMostUsedList li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.chatGame .chatMostUsedList li>span{overflow-wrap:anywhere}.chatGame .chatMostUsedList li>strong{font-variant-numeric:tabular-nums}

@container chat-conversation (max-width:420px){
.chatMessages{border:1px solid #d7e2ed;border-radius:12px}
.chatEntry{grid-template-columns:42px minmax(52px,.55fr) minmax(0,1.45fr) 18px;gap:8px;min-height:74px;margin:0;padding:10px 8px;border-bottom:1px solid #dfe7ef;border-radius:0;font-size:15px}
.chatEntry.isLatest:not(.cityChainError){background:#e4f2ff;border-radius:10px}
.chatAuthorAvatar{width:42px;height:42px;font-size:17px}.chatAuthorMeta{font-size:14px}.chatAuthorMeta time{font-size:12px}
.chatGame .chatAuthorName,.chatGame .chatAuthorName a{font-size:12px;font-weight:400}
.chatGame .chatBubble{padding:7px 9px;gap:7px;min-height:40px;font-size:16px;border-radius:10px}.chatBubble>strong{font-size:16px}
.chatGame .chatBubble:has(> .chatTermCount){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 7px}
.chatBubble > .chatTermCount{grid-column:1/-1}
.chatVerdict{width:21px;height:21px;min-width:21px;font-size:18px}
.chatGame .chatReport>summary{font-size:26px}
}

.chatRuleNotes{margin-top:10px;font-size:.875em}
.chatRuleNotes:not(:has(>p:not(:empty))){display:none}
.chatRuleNotes>summary{cursor:pointer}
.chatRuleNotes>p{margin:6px 0 0;overflow-wrap:anywhere;white-space:pre-line}

.chatGame .chatReportActions:has(.chatReportDelete){flex-wrap:wrap}
.chatGame .chatReportActions>button.chatReportDelete{border-color:#e8c4ca;background:#fff5f6;color:#9e2239}
.chatGame .chatReportActions>button.chatReportDelete:enabled:hover{background:#f9e0e5}

/* Action controls share the primary color. Board fields and result indicators keep their own palette. */
.chatGame :is(
 .chessToolbar button,.chessActions button,.battleControls button,.sudokuControls button,.tttControls button,
 .sudokuDigits button,.hmKey,.connectColumn,.chatEitherOption,.chatRatingToggle,
 .unknownActions button:not(.unknownRole),.slfActions button:not(.slfStop),.slfRound button:not(.slfStop,.chatBoxToggle)
):enabled {
 background:var(--chat-blue);
 border-color:var(--chat-blue);
 color:#fff;
}
.chatGame :is(
 .chessToolbar button,.chessActions button,.battleControls button,.sudokuControls button,.tttControls button,
 .sudokuDigits button,.hmKey,.connectColumn,.chatEitherOption,.chatRatingToggle,
 .unknownActions button:not(.unknownRole),.slfActions button:not(.slfStop),.slfRound button:not(.slfStop,.chatBoxToggle)
):enabled:hover {
 background:#1f628b;
 border-color:#1f628b;
}
.chatGame :is(.hmKey:not(.hmHit,.hmMiss),.connectColumn):disabled {
 background:#edf0f3;
 border-color:#d5dde4;
 color:#7a8793;
 opacity:1;
 cursor:not-allowed;
}