.catlo-game{--cg-red:#b42318;--cg-ink:#17202a;--cg-muted:#667085;--cg-line:#e4e7ec;--cg-paper:#fff;--cg-warm:#fff8ec;max-width:1180px;margin:0 auto;padding:24px;color:var(--cg-ink)}.catlo-game *{box-sizing:border-box}.catlo-game [hidden]{display:none!important}.catlo-game__header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:24px}.catlo-game h1,.catlo-game h2,.catlo-game p{margin-top:0}.catlo-game h1{margin-bottom:8px;font-size:clamp(28px,4vw,42px);line-height:1.08}.catlo-game__eyebrow{margin-bottom:6px;color:var(--cg-red);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.catlo-game__connection{flex:none;padding:7px 11px;border:1px solid var(--cg-line);border-radius:999px;background:#f8fafc;color:var(--cg-muted);font-size:13px}.catlo-game__connection[data-online="true"]{border-color:#abefc6;background:#ecfdf3;color:#067647}.catlo-game__notice,.catlo-game__panel,.catlo-game__card{border:1px solid var(--cg-line);border-radius:18px;background:var(--cg-paper);box-shadow:0 10px 32px rgba(16,24,40,.06)}.catlo-game__notice{padding:48px;text-align:center}.catlo-game__panel{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:28px}.catlo-game__join{grid-column:1/-1;padding-top:20px;border-top:1px solid var(--cg-line)}.catlo-game label{display:block;margin-bottom:7px;font-weight:700}.catlo-game__join>div,.catlo-game__copy,.catlo-game__chat form{display:flex;gap:8px}.catlo-game input{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #b9c0ca;border-radius:10px;background:#fff;color:var(--cg-ink);}.catlo-game input:focus,.catlo-game button:focus-visible,.catlo-game a:focus-visible{outline:3px solid rgba(180,35,24,.22);outline-offset:2px}.catlo-game__button{display:inline-flex;min-height:44px;padding:10px 16px;align-items:center;justify-content:center;border:1px solid #cbd0d8;border-radius:10px;background:#fff;color:var(--cg-ink);font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}.catlo-game__button:hover{background:#f8fafc}.catlo-game__button:disabled{cursor:not-allowed;opacity:.55}.catlo-game__button--primary{border-color:var(--cg-red);background:var(--cg-red);color:#fff}.catlo-game__button--primary:hover{background:#912018}.catlo-game__button--danger{color:#b42318}.catlo-game__link{min-height:44px;border:0;background:transparent;color:#475467;text-decoration:underline;cursor:pointer}.catlo-game__waiting{display:block;max-width:680px;margin:0 auto;padding:42px;text-align:center}.catlo-game__waiting .catlo-game__copy{margin:22px 0 10px}.catlo-game__spinner{display:inline-block;width:30px;height:30px;margin-bottom:14px;border:3px solid #f3d5d1;border-top-color:var(--cg-red);border-radius:50%;animation:catlo-game-spin .8s linear infinite}@keyframes catlo-game-spin{to{transform:rotate(360deg)}}.catlo-game__game{display:grid;grid-template-columns:minmax(0,720px) minmax(280px,1fr);gap:22px;align-items:start}.catlo-game__board-column{min-width:0}.catlo-game__players{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:10px}.catlo-game__players>div:last-child{text-align:right}.catlo-game__piece-dot{display:inline-block;width:13px;height:13px;margin-right:5px;border-radius:50%;background:#252525;vertical-align:-1px}.catlo-game__piece-dot--red{background:var(--cg-red)}.catlo-game__turn{padding:7px 11px;border-radius:999px;background:var(--cg-warm);font-size:13px;font-weight:700;text-align:center}.catlo-game__board-wrap{overflow:hidden;border:1px solid #d5b687;border-radius:16px;background:#f3d39a;box-shadow:0 15px 38px rgba(76,49,15,.15)}.catlo-game canvas{display:block;width:100%;height:auto;touch-action:manipulation}.catlo-game__board-help{margin:10px 0 0;color:var(--cg-muted);font-size:13px;text-align:center}.catlo-game__sidebar{display:grid;gap:16px}.catlo-game__card{padding:20px}.catlo-game__card h2{font-size:19px}.catlo-game__actions{display:flex;flex-wrap:wrap;gap:8px}.catlo-game__draw-offer{margin-top:16px;padding:14px;border-radius:12px;background:var(--cg-warm)}.catlo-game__chat{display:flex;min-height:330px;flex-direction:column}.catlo-game__chat ol{overflow:auto;max-height:270px;min-height:150px;margin:0 0 12px;padding:0;list-style:none}.catlo-game__chat li{margin:0 0 8px;padding:8px 10px;border-radius:10px;background:#f2f4f7;overflow-wrap:anywhere}.catlo-game__chat li[data-own="true"]{background:#fff1ef}.catlo-game__chat small{display:block;margin-bottom:2px;color:var(--cg-muted)}.catlo-game__toast{position:fixed;z-index:1000;right:20px;bottom:20px;max-width:min(400px,calc(100vw - 40px));margin:0;padding:12px 16px;border-radius:10px;background:#17202a;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.2)}.catlo-game__sr-only{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.catlo-game[data-screen="connecting"] .catlo-game__connection{opacity:.7}
@media(max-width:880px){.catlo-game__game{grid-template-columns:1fr}.catlo-game__sidebar{grid-template-columns:1fr 1fr}.catlo-game__chat{min-height:260px}}
@media(max-width:600px){.catlo-game{padding:14px}.catlo-game__header{display:block}.catlo-game__connection{display:inline-block;margin-top:8px}.catlo-game__notice,.catlo-game__panel,.catlo-game__waiting{padding:24px 18px}.catlo-game__panel{display:block}.catlo-game__panel>.catlo-game__button{width:100%;margin:8px 0 20px}.catlo-game__join>div,.catlo-game__copy{display:grid}.catlo-game__sidebar{grid-template-columns:1fr}.catlo-game__players{font-size:13px}.catlo-game__turn{padding:5px 7px}.catlo-game__actions .catlo-game__button{flex:1}.catlo-game__toast{right:14px;bottom:14px}.catlo-game__board-wrap{border-radius:10px}}
@media(prefers-reduced-motion:reduce){.catlo-game__spinner{animation:none}}

/* Room entry: isolated cards prevent theme and viewport widths from breaking the join form. */
.catlo-game__lobby{display:block}
.catlo-game__lobby-intro{max-width:680px;margin-bottom:22px}
.catlo-game__lobby-intro>p:last-child{margin-bottom:0;color:var(--cg-muted)}
.catlo-game__rating-summary{display:flex;width:max-content;max-width:100%;margin:-10px 0 18px;padding:9px 12px;gap:18px;border:1px solid #d7e3dc;border-radius:12px;background:#f7fbf8;color:#475467;font-size:13px}
.catlo-game__rating-summary strong{margin-left:4px;color:#17643a;font-size:15px}
.catlo-game__rating-summary small{margin-left:7px;color:#667085}
.catlo-game[data-screen="game"] .catlo-game__rating-summary{display:none}
.catlo-game__room-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.catlo-game__room-action{position:relative;display:flex;min-width:0;padding:22px;padding-left:66px;flex-direction:column;border:1px solid var(--cg-line);border-radius:15px;background:#f8fafc}
.catlo-game__room-action h3{margin:0 0 6px;font-size:18px;line-height:1.3}
.catlo-game__room-action p{margin-bottom:18px;color:var(--cg-muted);font-size:14px;line-height:1.5}
.catlo-game__join>div:not(.catlo-game__room-code){display:block}
.catlo-game__room-step{position:absolute;top:22px;left:20px;display:grid;width:32px;height:32px;place-items:center;border-radius:50%;background:#fff1ef;color:var(--cg-red);font-weight:700}
.catlo-game__room-action>.catlo-game__button{align-self:flex-start;margin-top:auto}
.catlo-game__join{grid-column:auto;padding-top:22px;border-top:1px solid var(--cg-line)}
.catlo-game__join label{margin-bottom:7px}
.catlo-game__join small{display:block;margin-top:7px;color:var(--cg-muted);font-size:12px}
.catlo-game__room-code{display:flex;min-width:0;gap:8px}
.catlo-game__room-code .catlo-game__button{flex:none;white-space:nowrap}
@media(max-width:700px){.catlo-game__room-actions{grid-template-columns:1fr}}
@media(max-width:600px){.catlo-game__lobby-intro{margin-bottom:18px}.catlo-game__room-action{padding:18px;padding-left:60px}.catlo-game__room-step{top:18px;left:16px}.catlo-game__room-code{display:grid}.catlo-game__room-code .catlo-game__button,.catlo-game__room-action>.catlo-game__button{width:100%}}

/* Chat composer: keep the input flexible and the send action intact inside narrow sidebars. */
.catlo-game__chat form{display:grid;grid-template-columns:minmax(0,1fr) auto;min-width:0;align-items:stretch;gap:8px}
.catlo-game__chat form input{min-width:0}
.catlo-game__chat-send{min-width:62px;padding-inline:14px;white-space:nowrap}

/* Match focus surface: quiet the chrome around the warm board without reducing text contrast. */
.catlo-game[data-screen="game"]{--cg-ink:#f4f7f5;--cg-muted:#b8c2bd;--cg-line:#3a4742;--cg-paper:#242e2b;--cg-warm:#3a3023;padding:24px;border:1px solid #303c38;border-radius:24px;background:#18211e;color:var(--cg-ink);box-shadow:0 22px 60px rgba(9,15,13,.22)}
.catlo-game[data-screen="game"] .catlo-game__header{margin-bottom:18px}
.catlo-game[data-screen="game"] .catlo-game__header h1{color:#fff}
.catlo-game[data-screen="game"] .catlo-game__header p:not(.catlo-game__eyebrow){color:#b8c2bd}
.catlo-game[data-screen="game"] .catlo-game__eyebrow{color:#f3a99d}
.catlo-game[data-screen="game"] .catlo-game__connection{border-color:#46534e;background:#222c29;color:#d3dbd7}
.catlo-game[data-screen="game"] .catlo-game__connection[data-online="true"]{border-color:#397056;background:#19382a;color:#a9e6c3}
.catlo-game[data-screen="game"] .catlo-game__card{border-color:#3a4742;background:#242e2b;box-shadow:0 12px 30px rgba(7,12,10,.2)}
.catlo-game[data-screen="game"] .catlo-game__button:not(.catlo-game__button--primary){border-color:#52605a;background:#303b37;color:#f4f7f5}
.catlo-game[data-screen="game"] .catlo-game__button:not(.catlo-game__button--primary):hover{background:#3a4742}
.catlo-game[data-screen="game"] .catlo-game__button--danger{border-color:#87534d;color:#ffb4aa}
.catlo-game[data-screen="game"] input{border-color:#52605a;background:#18211e;color:#fff}
.catlo-game[data-screen="game"] input::placeholder{color:#98a49f}
.catlo-game[data-screen="game"] .catlo-game__draw-offer{background:#382f22;color:#f9e7bd}
.catlo-game[data-screen="game"] .catlo-game__chat li{background:#303a37;color:#f4f7f5}
.catlo-game[data-screen="game"] .catlo-game__chat li[data-own="true"]{background:#432d2a}
.catlo-game[data-screen="game"] .catlo-game__board-wrap{border-color:#a67c45;box-shadow:0 18px 42px rgba(3,8,6,.42),0 0 0 1px rgba(255,225,168,.08)}

/* Player identity cards: avatar and role remain legible at a glance while the turn gets one accent. */
.catlo-game__players{gap:12px;margin-bottom:12px}
.catlo-game__player{display:flex;min-width:0;align-items:center;gap:10px;padding:7px 9px;border:1px solid transparent;border-radius:14px;background:rgba(255,255,255,.035);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
.catlo-game__player:last-child{justify-content:flex-end;text-align:right}
.catlo-game__player[data-active="true"]{border-color:#b98c48;background:rgba(226,178,99,.11);box-shadow:inset 0 0 0 1px rgba(255,218,153,.08)}
.catlo-game__player-avatar{position:relative;display:grid;width:44px;height:44px;flex:0 0 44px;place-items:center;overflow:visible;border:1px solid #56635e;border-radius:50%;background:#34413c;color:#f6eee0;font-size:16px;font-weight:700;line-height:1}
.catlo-game__player-avatar img{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.catlo-game__player-avatar .catlo-game__piece-dot{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;margin:0;border:2px solid #18211e;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.catlo-game__player-copy{display:flex;min-width:0;flex-direction:column;gap:2px}
.catlo-game__player-copy small{overflow:hidden;color:#aeb9b4;font-size:11px;font-weight:700;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.catlo-game__player-copy strong{overflow:hidden;color:#f8faf9;font-size:15px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.catlo-game__turn{border:1px solid #61533b;background:#342d22;color:#f7ddb0;white-space:nowrap}

@media(max-width:600px){.catlo-game[data-screen="game"]{padding:12px;border-radius:16px}.catlo-game[data-screen="game"] .catlo-game__header{margin-bottom:14px}.catlo-game__players{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:5px}.catlo-game__player{gap:6px;padding:5px}.catlo-game__player-avatar{width:34px;height:34px;flex-basis:34px;font-size:13px}.catlo-game__player-avatar .catlo-game__piece-dot{width:12px;height:12px}.catlo-game__player-copy small{font-size:9px}.catlo-game__player-copy strong{font-size:12px}.catlo-game__turn{max-width:92px;padding:5px 7px;font-size:11px;white-space:normal}.catlo-game__board-help{color:#c5cec9}}

@media(prefers-reduced-motion:reduce){.catlo-game__player{transition:none}}

/* Dragging is implemented on the board itself; prevent page scrolling only over the canvas. */
.catlo-game canvas{touch-action:none;-webkit-user-select:none;user-select:none}

/* Upstream-size match shell: hkm-a/xiangqi geometry inside Catlo's quiet green chrome. */
.catlo-game[data-screen="game"]{max-width:1056px;padding:14px 16px 18px;border-color:#33443e;border-radius:20px;background:radial-gradient(circle at 38% 34%,rgba(206,166,83,.055),transparent 42%),#121b18}
.catlo-game[data-screen="game"] .catlo-game__header{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;gap:14px;min-height:42px;margin-bottom:10px;padding:0 2px;align-items:center}
.catlo-game__brand{display:flex;min-width:0;align-items:baseline;gap:9px;white-space:nowrap}
.catlo-game[data-screen="game"] .catlo-game__brand .catlo-game__eyebrow{margin:0;color:#d5a85f;font-size:9px;letter-spacing:.12em}
.catlo-game[data-screen="game"] .catlo-game__brand h1{margin:0;font-size:22px;line-height:1.05;letter-spacing:-.01em}
.catlo-game[data-screen="game"] .catlo-game__intro{overflow:hidden;margin:0;color:#9eaaa5;font-size:12px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.catlo-game[data-screen="game"] .catlo-game__connection{padding:5px 9px;font-size:11px}
.catlo-game__game{grid-template-columns:634px minmax(300px,1fr);gap:18px;justify-content:center}
.catlo-game__board-column{width:100%;max-width:634px}
.catlo-game__board-wrap{position:relative;width:634px;max-width:100%;padding:5px;border:1px solid rgba(245,218,155,.42);border-radius:17px;background:linear-gradient(145deg,#efd486 0%,#c99b46 24%,#845b1c 55%,#e0b85c 100%);box-shadow:0 0 0 1px rgba(240,215,140,.12),0 22px 52px rgba(1,6,4,.5),inset 0 1px 0 rgba(255,255,255,.28)}
.catlo-game__board-wrap::before{position:absolute;z-index:2;inset:3px;border:1px solid rgba(55,31,7,.38);border-radius:13px;content:"";pointer-events:none}
.catlo-game canvas{width:100%;max-width:622px;border-radius:11px}
.catlo-game__players{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;margin-bottom:8px}
.catlo-game__player{min-height:56px;padding:6px 8px;border-color:#4d5a55;border-radius:12px;background:#252c28;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.catlo-game__player[data-own="true"]{border-color:#477b68;background:#17362b}
.catlo-game__player[data-own="false"]{border-color:#7b6640;background:#30291f}
.catlo-game__player[data-active="true"]{border-color:#d5a854;box-shadow:inset 0 0 0 1px rgba(255,230,174,.17),0 0 0 1px rgba(213,168,84,.08)}
.catlo-game__player-avatar{width:40px;height:40px;flex-basis:40px;border-color:#586761;background:#2b3833}
.catlo-game__player-copy{flex:1 1 auto}
.catlo-game__player-copy small{color:#d2dbd7;font-size:11px;font-weight:700;text-shadow:0 1px 1px rgba(0,0,0,.55)}
.catlo-game[data-screen="game"] .catlo-game__player-name,.catlo-game[data-screen="game"] .catlo-game__player-name:visited{display:block;overflow:hidden;color:#fffdf6;font-size:15px;font-weight:700;line-height:1.25;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.7);text-overflow:ellipsis;white-space:nowrap}
.catlo-game[data-screen="game"] .catlo-game__player-name[href]:hover,.catlo-game[data-screen="game"] .catlo-game__player-name[href]:focus-visible{color:#ffe0a1;text-decoration:underline;text-underline-offset:2px}
.catlo-game__player-name[aria-disabled="true"]{pointer-events:none}
.catlo-game__friend{display:inline-flex;min-height:30px;padding:5px 8px;flex:none;align-items:center;gap:3px;border:1px solid #806331;border-radius:999px;background:#2d281e;color:#f1d79e;font-size:12px;font-weight:700;line-height:1.1;white-space:nowrap;cursor:pointer}
.catlo-game__friend:hover{border-color:#c49b4e;background:#3b3020;color:#fff0c9}
.catlo-game__friend:disabled{border-color:#48544f;background:#27312e;color:#aeb8b3;cursor:default;opacity:1}
.catlo-game__friend[aria-busy="true"]{cursor:wait}
.catlo-game__turn{max-width:112px;padding:6px 8px;border-color:#695630;background:#29251d;color:#f4dba5;font-size:11px;line-height:1.25;white-space:normal}
.catlo-game__board-help{margin-top:7px;color:#aeb9b4;font-size:11px}
.catlo-game__sidebar{gap:12px}
.catlo-game[data-screen="game"] .catlo-game__card{border-color:#33433d;border-radius:15px;background:#1c2723}
.catlo-game__card{padding:16px}
.catlo-game__chat{min-height:300px}

@media(max-width:1000px){.catlo-game__game{grid-template-columns:minmax(0,634px)}.catlo-game__sidebar{grid-template-columns:1fr 1fr}.catlo-game[data-screen="game"] .catlo-game__header{grid-template-columns:auto 1fr}.catlo-game[data-screen="game"] .catlo-game__intro{grid-column:1/2;grid-row:2}.catlo-game[data-screen="game"] .catlo-game__connection{grid-column:2;grid-row:1/3;justify-self:end}}
@media(max-width:680px){.catlo-game[data-screen="game"]{padding:9px 8px 14px;border-radius:14px}.catlo-game[data-screen="game"] .catlo-game__header{grid-template-columns:minmax(0,1fr) auto;gap:6px;min-height:34px;margin-bottom:7px}.catlo-game__brand{gap:6px}.catlo-game[data-screen="game"] .catlo-game__brand .catlo-game__eyebrow{font-size:7px}.catlo-game[data-screen="game"] .catlo-game__brand h1{font-size:17px}.catlo-game[data-screen="game"] .catlo-game__intro{grid-column:1/-1;grid-row:2;font-size:10px}.catlo-game[data-screen="game"] .catlo-game__connection{grid-column:2;grid-row:1;padding:4px 7px;font-size:9px}.catlo-game__players{gap:4px}.catlo-game__player{min-height:49px;padding:5px;gap:5px}.catlo-game__player-avatar{width:34px;height:34px;flex-basis:34px}.catlo-game__player-copy small{font-size:9.5px}.catlo-game[data-screen="game"] .catlo-game__player-name{max-width:82px;font-size:12px}.catlo-game__friend{min-height:25px;padding:4px 5px;font-size:8px}.catlo-game__turn{max-width:78px;padding:4px 5px;font-size:9px}.catlo-game__board-wrap{padding:4px;border-radius:12px}.catlo-game__sidebar{grid-template-columns:1fr}.catlo-game__card{padding:14px}}

/* Progressive lobby modes remain compact; engine code is still lazy-loaded only after machine play starts. */
.catlo-game__quick-play{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:24px}
.catlo-game__mode{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:18px;border:1px solid #d7e3dc;border-radius:15px;background:linear-gradient(145deg,#f7fbf8,#fff)}
.catlo-game__mode>span{display:grid;width:38px;height:38px;place-items:center;border-radius:11px;background:#e9f5ed;color:#17643a;font-size:20px}
.catlo-game__mode h3{margin:0 0 4px;font-size:17px}.catlo-game__mode p{margin:0;color:var(--cg-muted);font-size:13px;line-height:1.45}
.catlo-game__mode label{display:inline-block;margin:8px 7px 0 0;color:#475467;font-size:12px}.catlo-game__mode select{min-height:36px;padding:6px 30px 6px 9px;border:1px solid #b9c0ca;border-radius:8px;background:#fff;color:var(--cg-ink);}
.catlo-game__lobby-intro--private{margin-top:4px;margin-bottom:12px}.catlo-game__lobby-intro--private h2{font-size:20px}
@media(max-width:760px){.catlo-game__quick-play{grid-template-columns:1fr}.catlo-game__mode{grid-template-columns:auto minmax(0,1fr)}.catlo-game__mode>.catlo-game__button{grid-column:1/-1;width:100%}}

/* Optional conversational assistant: explicit game context, compact safe-text UI. */
.catlo-game__assistant{display:flex;min-height:280px;flex-direction:column}
.catlo-game__assistant-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.catlo-game__assistant-head h2{margin-bottom:10px}
.catlo-game__assistant-head>span{padding:4px 7px;border:1px solid #426453;border-radius:999px;background:#183628;color:#a8e0bf;font-size:9px;font-weight:700;white-space:nowrap}
.catlo-game__assistant ol{overflow:auto;max-height:240px;min-height:120px;margin:0 0 10px;padding:0;list-style:none}
.catlo-game__assistant li{margin:0 0 8px;padding:9px 10px;border-radius:10px;background:#303a37;color:#f4f7f5;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.catlo-game__assistant li[data-role="user"]{margin-left:20px;background:#432d2a}
.catlo-game__assistant li[data-role="assistant"]{margin-right:12px}
.catlo-game__assistant form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.catlo-game__assistant form button{white-space:nowrap}
.catlo-game__assistant>small{display:block;margin-top:8px;color:#aeb9b4;font-size:10px;line-height:1.35}
@media(max-width:480px){.catlo-game__assistant form{grid-template-columns:1fr}.catlo-game__assistant form button{width:100%}}

/* Lobby v2: a compact, route-scoped entry surface with three clear ways to play. */
.catlo-game{--cg-primary:var(--catlo-color-primary,#087da4);--cg-primary-hover:var(--catlo-color-primary-hover,#066584);--cg-primary-soft:var(--catlo-color-primary-soft,#e7f5f9);--cg-surface-soft:var(--catlo-color-surface-soft,#f8fafc);--cg-text-muted:var(--catlo-color-text-muted,#64748b)}
.catlo-game:not([data-screen="game"]){max-width:1120px;padding:18px 24px 36px}
.catlo-game:not([data-screen="game"]) .catlo-game__header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:0 18px;align-items:center;margin-bottom:14px;padding:2px 2px 0}
.catlo-game:not([data-screen="game"]) .catlo-game__brand{display:block;position:static;min-width:0;white-space:normal}
.catlo-game:not([data-screen="game"]) .catlo-game__brand .catlo-game__eyebrow{position:static;margin:0 0 5px;color:var(--cg-primary);font-size:11px;line-height:1.25;letter-spacing:.12em}
.catlo-game:not([data-screen="game"]) .catlo-game__brand h1{position:static;margin:0;color:#172033;font-size:clamp(30px,3.5vw,40px);font-weight:700;line-height:1.12;letter-spacing:-.035em}
.catlo-game:not([data-screen="game"]) .catlo-game__intro{grid-column:1;grid-row:2;position:static;margin:9px 0 0;max-width:660px;color:var(--cg-text-muted);font-size:15px;line-height:1.5}
.catlo-game:not([data-screen="game"]) .catlo-game__connection{grid-column:2;grid-row:1/3;display:inline-flex;min-height:32px;padding:6px 10px;align-items:center;gap:7px;border-color:#d8e1e7;background:#fff;color:#526071;font-size:12px;font-weight:700;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.catlo-game:not([data-screen="game"]) .catlo-game__connection::before{width:7px;height:7px;flex:none;border-radius:50%;background:#98a2b3;content:"";box-shadow:0 0 0 3px #f2f4f7}
.catlo-game:not([data-screen="game"]) .catlo-game__connection[data-online="true"]{border-color:#b7e4c7;background:#f3fbf6;color:#14733c}
.catlo-game:not([data-screen="game"]) .catlo-game__connection[data-online="true"]::before{background:#20a45a;box-shadow:0 0 0 3px #dff5e7}
.catlo-game:not([data-screen="game"]) .catlo-game__button--primary{border-color:var(--cg-primary);background:var(--cg-primary);color:#fff}
.catlo-game:not([data-screen="game"]) .catlo-game__button--primary:hover{border-color:var(--cg-primary-hover);background:var(--cg-primary-hover)}

.catlo-game__rating-summary{display:flex;width:100%;max-width:none;min-height:48px;margin:0 0 18px;padding:7px 12px;align-items:center;gap:13px;border-color:#dce5ea;border-radius:13px;background:#fff;color:#445164;box-shadow:0 1px 3px rgba(15,23,42,.035)}
.catlo-game__rating-item{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.catlo-game__rating-item small{margin:0;color:#718096;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.045em}
.catlo-game__rating-summary .catlo-game__rating-item strong{margin:0;color:#172033;font-size:17px;font-weight:700}
.catlo-game__rating-divider{width:1px;height:24px;background:#e5eaf0}
.catlo-game__rating-state{display:inline-flex;margin-left:auto;align-items:center;gap:7px;color:#526071;font-size:12px;font-weight:700;white-space:nowrap}
.catlo-game__rating-state i{width:7px;height:7px;border-radius:50%;background:#20a45a;box-shadow:0 0 0 3px #e2f5e9}

.catlo-game__panel.catlo-game__lobby{display:block;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.catlo-game__lobby-intro{display:flex;max-width:none;margin:0 0 13px;align-items:end;justify-content:space-between;gap:20px}
.catlo-game__lobby-intro>div{min-width:0}
.catlo-game__lobby-intro .catlo-game__eyebrow{margin:0 0 3px;color:#7a8796;font-size:10px}
.catlo-game__lobby-intro h2{margin:0;color:#172033;font-size:20px;line-height:1.25;letter-spacing:-.015em}
.catlo-game__lobby-intro>p{margin:0;color:var(--cg-text-muted);font-size:13px;line-height:1.45}
.catlo-game__quick-play{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px}
.catlo-game__mode{display:grid;min-height:242px;padding:18px;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:14px;align-items:stretch;border:1px solid #dce4e9;border-radius:16px;background:#fff;box-shadow:0 6px 20px rgba(15,23,42,.055)}
.catlo-game__mode--ranked{border-color:#cddfe7;box-shadow:0 8px 24px rgba(8,125,164,.085)}
.catlo-game__mode-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.catlo-game__mode-icon{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:11px;background:var(--cg-primary-soft);color:var(--cg-primary)}
.catlo-game__mode-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.catlo-game__mode--ranked .catlo-game__mode-icon{background:#fff5e7;color:#a96108}
.catlo-game__mode-badge{display:inline-flex;min-height:26px;padding:4px 9px;align-items:center;border:1px solid #d8e6eb;border-radius:999px;background:#f7fafb;color:#526071;font-size:11px;font-weight:700;white-space:nowrap}
.catlo-game__mode--ranked .catlo-game__mode-badge{border-color:#f0d7ae;background:#fff9ef;color:#945407}
.catlo-game__mode-copy h3{margin:0 0 7px;color:#172033;font-size:21px;line-height:1.25;letter-spacing:-.02em}
.catlo-game__mode-copy p{margin:0;color:#5f6d7d;font-size:14px;line-height:1.55}
.catlo-game__mode-copy small{display:block;margin-top:9px;color:#7a8796;font-size:11px;line-height:1.45}
.catlo-game__mode-footer{display:grid;margin-top:auto}
.catlo-game__mode-footer>.catlo-game__button{width:100%}
.catlo-game__mode-footer--machine{grid-template-columns:minmax(0,1fr) auto;gap:0 9px}
.catlo-game__mode-footer--machine label{grid-column:1/-1;margin:0 0 6px;color:#526071;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.catlo-game__mode-footer--machine select{width:100%;min-width:0;min-height:44px;padding:9px 32px 9px 11px;border:1px solid #bdc8d2;border-radius:10px;background:#fff;color:#172033;font-size:13px;font-weight:700;line-height:1.2}
.catlo-game__mode-footer--machine>.catlo-game__button{width:auto;min-width:104px}
.catlo-game__button[aria-busy="true"]{cursor:wait;opacity:.72}

.catlo-game__friend-panel{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,1.65fr);gap:18px;padding:17px 18px;align-items:center;border:1px solid #dce4e9;border-radius:16px;background:var(--cg-surface-soft);box-shadow:0 4px 16px rgba(15,23,42,.035)}
.catlo-game__friend-heading{display:flex;min-width:0;align-items:center;gap:12px}
.catlo-game__friend-heading .catlo-game__mode-icon{background:#eef1fb;color:#5265a8}
.catlo-game__friend-heading .catlo-game__eyebrow{margin:0 0 2px;color:#78869a;font-size:9px}
.catlo-game__friend-heading h2{margin:0 0 3px;color:#172033;font-size:18px;line-height:1.25}
.catlo-game__friend-heading p:last-child{margin:0;color:#64748b;font-size:12px;line-height:1.4}
.catlo-game__room-actions{display:grid;grid-template-columns:minmax(140px,.7fr) auto minmax(250px,1.5fr);gap:12px;align-items:center}
.catlo-game__room-action{position:static;display:flex;min-width:0;padding:0;flex-direction:column;border:0;border-radius:0;background:transparent}
.catlo-game__room-action--create{gap:6px}
.catlo-game__room-action--create small{color:#78869a;font-size:10px;text-align:center}
.catlo-game__room-separator{display:inline-flex;align-items:center;justify-content:center;color:#8a96a6;font-size:10px;font-weight:700;text-transform:uppercase}
.catlo-game__join{display:grid;grid-column:auto;padding:0;border:0}
.catlo-game__join label{margin:0 0 5px;color:#526071;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.catlo-game__join>div:not(.catlo-game__room-code){display:block}
.catlo-game__join small{display:block;margin-top:5px;color:#78869a;font-size:10px;line-height:1.3}
.catlo-game__room-code{display:flex;min-width:0;gap:7px}
.catlo-game__room-code input{min-height:42px;background:#fff;font-size:13px;font-weight:600;letter-spacing:.035em;text-transform:uppercase}
.catlo-game__room-code input::placeholder{color:#98a2b3;font-weight:600;letter-spacing:.05em}
.catlo-game__room-code input:invalid:not(:placeholder-shown){border-color:#d92d20}
.catlo-game__room-code .catlo-game__button{min-height:42px;flex:none;white-space:nowrap}

@media(max-width:760px){
 .catlo-game__quick-play{grid-template-columns:repeat(2,minmax(0,1fr))}
 .catlo-game__mode{min-height:260px}
 .catlo-game__friend-panel{grid-template-columns:1fr;gap:14px}
}
@media(max-width:620px){
 .catlo-game:not([data-screen="game"]){padding:12px 14px 26px}
 .catlo-game:not([data-screen="game"]) .catlo-game__header{gap:0 8px;margin-bottom:12px;padding-top:0}
 .catlo-game:not([data-screen="game"]) .catlo-game__brand .catlo-game__eyebrow{font-size:9px}
 .catlo-game:not([data-screen="game"]) .catlo-game__brand h1{font-size:29px;letter-spacing:-.04em}
 .catlo-game:not([data-screen="game"]) .catlo-game__intro{grid-column:1/-1;margin-top:9px;font-size:13px}
 .catlo-game:not([data-screen="game"]) .catlo-game__connection{grid-row:1;min-height:28px;padding:5px 8px;font-size:10px}
 .catlo-game__rating-summary{min-height:44px;margin-bottom:15px;padding:6px 9px;gap:9px}
 .catlo-game__rating-item{display:grid;gap:0}
 .catlo-game__rating-item small{font-size:9px}
 .catlo-game__rating-summary .catlo-game__rating-item strong{font-size:14px;line-height:1.2}
 .catlo-game__rating-divider{height:22px}
 .catlo-game__rating-state{font-size:10px}
 .catlo-game__lobby-intro{display:block;margin-bottom:11px}
 .catlo-game__lobby-intro>p{margin-top:4px;font-size:12px}
 .catlo-game__quick-play{grid-template-columns:1fr;gap:11px;margin-bottom:11px}
 .catlo-game__mode{min-height:0;padding:15px;gap:11px;border-radius:14px}
 .catlo-game__mode-copy h3{font-size:19px}
 .catlo-game__mode-copy p{font-size:13px}
 .catlo-game__friend-panel{padding:15px;border-radius:14px}
 .catlo-game__room-actions{grid-template-columns:1fr;gap:9px}
 .catlo-game__room-separator{position:relative;gap:8px}
 .catlo-game__room-separator::before,.catlo-game__room-separator::after{height:1px;flex:1;background:#dce3e8;content:""}
 .catlo-game__room-action--create .catlo-game__button{width:100%}
 .catlo-game__room-code{display:grid;grid-template-columns:minmax(0,1fr) auto}
}
@media(max-width:390px){
 .catlo-game:not([data-screen="game"]) .catlo-game__brand h1{font-size:27px}
 .catlo-game__rating-state{margin-left:0}
 .catlo-game__mode-footer--machine{grid-template-columns:minmax(0,1fr) auto}
 .catlo-game__mode-footer--machine>.catlo-game__button{min-width:96px}
 .catlo-game__room-code{grid-template-columns:1fr}
 .catlo-game__room-code .catlo-game__button{width:100%}
}

/* When the optional conversational panel is OFF, let chat use the released
   desktop sidebar height. The board geometry and smaller breakpoints stay unchanged. */
@media(min-width:1001px){
 .catlo-game[data-screen="game"][data-assistant-ui="off"] .catlo-game__sidebar{align-self:stretch;grid-template-rows:auto minmax(0,1fr)}
 .catlo-game[data-screen="game"][data-assistant-ui="off"] .catlo-game__chat{height:100%;min-height:0}
 .catlo-game[data-screen="game"][data-assistant-ui="off"] .catlo-game__chat ol{max-height:none;flex:1 1 auto}
}