.online-screen{max-width:620px;margin:auto;padding-bottom:40px}.online-screen h1{font-size:clamp(24px,calc(6 * var(--ui-vw,1vw)),36px);margin:8px 0}.online-paper,.online-recovery{background:#faf6e9;color:#142e29;border:1px solid #d7bf74;border-radius:14px;padding:20px}.online-screen label{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}.online-screen input,.online-screen select{width:100%;font:inherit;padding:12px;border-radius:8px;border:1px solid #b8ad94;background:#fffdf4;color:#18352d;box-sizing:border-box}.online-screen button{min-height:44px}.room-code{font:700 clamp(28px,calc(8 * var(--ui-vw,1vw)),42px)/1.3 ui-monospace,monospace;letter-spacing:.13em;user-select:all;text-align:center}.room-members>div{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #d3cbb9}.online-connection{position:fixed;z-index:100;top:0;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:0 0 10px 10px;background:#713b23;color:white;font-size:12px;pointer-events:none}.online-connection.connected{background:#143f32;opacity:.9}.online-room-button{font-size:11px;padding:3px 6px;min-width:0}.online-recovery input{font:15px ui-monospace,monospace}.online-screen .help{line-height:1.55}.online-screen .notice{color:#ffe9ab}.online-screen .row{gap:10px}

.online-settings{position:relative}.online-settings::after{content:'';position:absolute;width:5px;height:5px;background:#8edeb3;border-radius:50%;right:3px;top:3px}
.online-paper .help,.online-recovery .help{color:#555e4d;opacity:1}.online-paper .row{flex-wrap:wrap}
.room-members small{font-size:11px;color:#6b531d;white-space:nowrap}.room-members span{white-space:nowrap}.room-paused,.room-confirm{padding:12px;background:#f1dfbd;border-radius:8px;color:#503515}.room-management .danger{background:#713b32;color:#fff2dc}.room-management details button{display:block;width:100%;margin-top:8px}
.online-tabs{display:flex;gap:7px;flex-wrap:wrap}.online-tabs button{flex:1;min-width:64px;background:#1b3d34;color:#f5e8c9;border:1px solid #a99560}.online-tabs button[aria-pressed=true]{background:#e8d3a2;color:#18352d;box-shadow:inset 0 -3px #a68a4a}.online-check{flex-direction:row!important;align-items:flex-start;gap:10px!important;line-height:1.6}.online-check input{width:20px!important;min-width:20px;min-height:20px;margin-top:3px}.social-person{display:flex;flex-direction:column;gap:12px;padding:14px 0;border-bottom:1px solid #b9a57866;overflow-wrap:anywhere}.social-person small{display:block;margin-top:5px;color:#4c6253}.social-person button{font-size:.85rem;padding:8px 12px}.social-person form{flex-wrap:wrap}.social-person form label{min-width:130px}.admin-counts{padding:12px;background:#e9dfc4;border-radius:8px}.online-screen .room-confirm input{background:#fffdf4;color:#18352d}.online-screen .row{min-width:0;gap:10px}.online-screen .help{line-height:1.65}.online-chat-dock{position:fixed;z-index:1200;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));font-size:14px;max-width:calc(calc(100 * var(--ui-vw,1vw)) - 24px)}.chat-toggle{float:right;background:#193c33;color:#f5e9c9;border:1px solid #bda771;box-shadow:0 3px 15px #0005;min-height:44px}.chat-toggle b{background:#9b3c35;border-radius:20px;padding:2px 6px}.chat-paper{position:absolute;right:0;bottom:54px;width:min(350px,calc(calc(100 * var(--ui-vw,1vw)) - 24px));max-height:calc(72 * var(--ui-vh,1dvh));overflow:auto;background:#faf6e9;color:#17382e;border:1px solid #bca064;border-radius:14px;padding:14px;box-shadow:0 10px 36px #0006}.chat-paper header{gap:10px}.chat-paper button{min-height:36px;font-size:.85rem;padding:6px 10px}.chat-paper input{min-width:0;width:100%;background:#fffdf5;color:#17382e;border:1px solid #b7a786;border-radius:6px;padding:10px;font:inherit}.chat-messages{max-height:calc(27 * var(--ui-vh,1dvh));min-height:70px;overflow:auto;margin:12px 0;overscroll-behavior:contain}.chat-messages p{margin:8px 0;padding:8px 10px;background:#e9e2cd;border-radius:8px;overflow-wrap:anywhere;white-space:pre-wrap}.chat-messages strong{display:block;font-size:.78rem;color:#566b54}.chat-messages span{display:block;margin-top:3px}.chat-emojis{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}.chat-emojis button{font-size:22px;min-width:38px}.chat-error{color:#873d32;font-size:.85rem}.chat-paper small{display:block;margin-top:10px;color:#5c6e60;line-height:1.6}.card-inspector{display:block;position:fixed;z-index:1400;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));width:min(360px,calc(calc(100 * var(--ui-vw,1vw)) - 28px));max-width:none;max-height:calc(calc(100 * var(--ui-vh,1dvh)) - 88px);overflow:auto;overscroll-behavior:contain;background:#faf6e9;color:#18382e;border:1px solid #c0a76d;padding:16px;box-shadow:0 10px 40px #0007}.card-inspector header{position:sticky;top:-16px;background:#faf6e9;padding:10px 0;z-index:2}.inspect-card-heading{display:flex;align-items:center;justify-content:center;gap:20px;margin:12px 0}.card-inspector .inspect-card-heading>.card{width:100px}.card-inspector .rule-example .card{width:38px;min-width:0}.card-inspector .rule-example{display:flex;flex-wrap:wrap;gap:4px}.card-inspector .rule-catalogue{display:block}.card-inspector .rule-catalogue article{padding:12px 0;border-top:1px solid #bca76f66;background:transparent}.card-inspector .rule-catalogue h3{display:flex;justify-content:space-between;font-size:1rem}.card-inspector .help,.card-inspector .example-note{color:#536b58;font-size:.8rem;line-height:1.6}.card-inspector .rule-example+ .example-note{margin-bottom:0}.motion-card[data-inspect-motion]{pointer-events:auto;cursor:help}.single-table [data-hand-card][data-playable=false]{cursor:help}.single-table [data-hand-card]{touch-action:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@container app-viewport (max-height:500px){.card-inspector{max-height:calc(calc(100 * var(--ui-vh,1dvh)) - 28px);width:min(340px,calc(48 * var(--ui-vw,1vw)))}.card-inspector .inspect-card-heading>.card{width:65px}.chat-paper{max-height:calc(calc(100 * var(--ui-vh,1dvh)) - 80px)}.chat-messages{max-height:calc(22 * var(--ui-vh,1dvh))}}
.screen.online-screen{align-content:start}.account-environment{min-width:0;line-height:1.6}.account-environment p{margin:6px 0 0;font-size:.85rem}

/* Public chat overlays share the app viewport, independent of 2D/3D table redraws. */
.chat-at-table .chat-paper{z-index:3}
.chat-at-table .chat-toggle{position:relative;z-index:4}
.table-chat-handle{position:absolute;right:-12px;bottom:60px;width:30px;min-width:30px;height:52px;min-height:44px;padding:0 2px 0 5px;border:1px solid #bda77199;border-right:0;border-radius:28px 0 0 28px;background:rgb(0 8 6 / var(--chat-background,.45));color:#f9e8b8;font:24px/1 serif;z-index:2;touch-action:manipulation}
.table-chat-feed{box-sizing:border-box}
.table-chat-feed[hidden]{display:none}
.table-chat-feed{position:absolute;right:0;bottom:58px;width:clamp(155px,calc(22 * var(--ui-vw,1vw)),340px);height:min(320px,calc(36 * var(--ui-vh,1dvh)));max-height:calc(38 * var(--ui-vh,1dvh));display:flex;flex-direction:column;color:#fff4d5;background:rgb(0 8 6 / var(--chat-background,.45));border:1px solid #dbc69235;border-radius:9px;padding:6px 8px;z-index:1;text-shadow:0 1px 3px #000;pointer-events:none}
.table-chat-feed header{display:flex;align-items:center;gap:4px;font-size:11px;opacity:.85}
.table-chat-feed header strong{flex:1}
.table-chat-feed header button{pointer-events:auto;min-height:26px;min-width:26px;padding:0 4px;background:transparent;border:0;color:inherit;font-size:17px}
.table-chat-lines{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#cdb57977 transparent;pointer-events:auto;max-height:calc(32 * var(--ui-vh,1dvh));font-size:var(--chat-font-size,13px);line-height:1.45}
.table-chat-lines p{margin:5px 0;overflow-wrap:anywhere;white-space:pre-wrap}
.table-chat-lines strong{color:#ead7a2;font-weight:600}
.table-chat-lines .help{font-size:11px;color:#d2dacb}
.table-chat-bubbles{position:absolute;inset:0;pointer-events:none;z-index:1100;overflow:hidden}
.table-chat-bubble{position:absolute;width:max-content;padding:8px 10px;border:1px solid #d4bf7b77;border-radius:12px;background:rgb(0 8 6 / var(--chat-background,.45));color:#fff8df;font-size:var(--chat-font-size,13px);line-height:1.4;overflow-wrap:anywhere;white-space:pre-wrap;text-shadow:0 1px 3px #000;box-shadow:0 3px 12px #0002;animation:table-chat-speech 3280ms linear both;pointer-events:none}
.table-chat-bubble[hidden]{display:none}
@keyframes table-chat-speech{0%{opacity:0;transform:translateY(3px)}4.27%,95.73%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-3px)}}
@container app-viewport (orientation:portrait){.table-chat-feed{right:0;bottom:calc(14 * var(--ui-vh,1dvh) + 54px);width:clamp(102px,calc(29 * var(--ui-vw,1vw)),180px);height:min(240px,calc(23 * var(--ui-vh,1dvh)));max-height:calc(24 * var(--ui-vh,1dvh));padding:5px}.table-chat-lines{max-height:calc(20 * var(--ui-vh,1dvh));font-size:var(--chat-font-size,13px)}.table-chat-bubble{padding:6px 8px}}
@media (prefers-reduced-motion:reduce){.table-chat-bubble{animation-name:table-chat-still}@keyframes table-chat-still{0%,99.99%{opacity:1}100%{opacity:0}}}

.chat-paper header{flex-wrap:wrap}.chat-paper header strong{flex:1;min-width:0}.chat-paper header [data-chat=close]{min-height:40px}

.online-chat-dock{font-size:var(--chat-font-size,13px)}.chat-paper .chat-messages{font-size:var(--chat-font-size,13px)}
.table-chat-bubble{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* Anchor battle chat to the same frame when desktop forces a portrait layout. */
.online-chat-dock.chat-at-table{position:absolute}

.single-table :is(.opponent-heading,.own-heading){position:relative}
.single-table .online-seat-note{position:absolute;left:2px;top:calc(100% + 5px);z-index:5;max-width:240px;width:max-content;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid #d8b86f77;border-radius:5px;background:#17221ce6;color:#f5d997;padding:3px 6px;font-size:10px!important;font-weight:400;line-height:1.3!important;pointer-events:none}
.single-table .online-seat-note[data-presence=disconnected]{border-color:#db947a99;color:#ffd0b6}
.single-table .own-heading .online-seat-note{top:auto;bottom:calc(100% + 6px)}
/* Flat layouts reserve a status line instead of covering the capture toggle. */
#app .single-table.gui-modern:not(.gui-spatial) .opponent[data-player-seat]:has(.online-seat-note){grid-template-rows:70px minmax(0,1fr)}
#app .single-table.gui-modern:not(.gui-spatial) .opponent .opponent-heading:has(.online-seat-note){min-height:66px;align-content:start;overflow:visible}
#app .single-table.gui-modern:not(.gui-spatial) .opponent-heading .online-seat-note{position:absolute;top:auto;bottom:0;left:2px;max-width:calc(100% - 4px);box-sizing:border-box}
@container app-viewport (max-aspect-ratio:1/1){
 #app .single-table.gui-classic .opponent:has(.online-seat-note){grid-template-rows:61px 35px minmax(0,1fr)}
 #app .single-table.gui-classic .opponent-heading:has(.online-seat-note){align-content:start}
 #app .single-table.gui-classic .opponent-heading .online-seat-note{top:auto;bottom:0;max-width:calc(100% - 4px);box-sizing:border-box}
}