/* 只装饰联机模块；原游戏的布局、棋盘、手牌与档案完全由 native.css 管理。 */
#online-app{color:#e0e9ec;background:#10171d;padding:14px 24px;font:14px "Microsoft YaHei",system-ui,sans-serif}#online-app:empty{display:none}#online-app h1{font-size:22px;margin:5px 0}#online-app h2{font-size:18px}#online-app h3{font-size:16px}#online-app p{line-height:1.5}#online-app button,#online-app input,#online-app select{font:inherit;color:inherit;background:#172b32;border:1px solid #39515a;border-radius:7px;padding:8px;cursor:pointer}#online-app button:disabled{opacity:.45;cursor:default}#online-app a{color:#86ddd8}#online-app .muted,#online-app small{color:#9dafb7}#online-app .actions{display:flex;gap:8px;flex-wrap:wrap}#online-app .connect-panel{max-width:700px;margin:5vh auto}#online-app form{display:grid;grid-template-columns:1fr 1fr;gap:16px}#online-app label{display:grid;gap:6px}#online-app .check{display:flex;align-items:center}#online-app .profile-edit{display:flex;align-items:center;gap:12px}#online-app .profile-edit .avatar{width:64px;height:64px}#online-app .room-heading{display:flex;justify-content:space-between;align-items:center}#online-app .players{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}#online-app .player{display:flex;gap:8px;align-items:center;position:relative;min-width:150px;text-align:left}#online-app .player span:not(.avatar){display:grid}#online-app .player.viewed{border-color:#83e4d5}#online-app .player.eliminated{opacity:.5}#online-app .avatar{width:38px;height:38px;object-fit:cover;border-radius:9px;display:grid;place-items:center;font-size:26px}#online-app .emote-bubble{position:absolute;right:3px;top:-7px;font-size:25px}#online-app .strategy-grid,#online-app .decisions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;max-height:50vh;overflow:auto;margin:10px 0}#online-app .strategy-card,#online-app .decision-card{display:grid;gap:6px;text-align:left}#online-app .portrait{width:60px;height:60px;object-fit:cover}#online-app .social{display:flex;gap:10px;align-items:center}#online-app .emotes{display:flex;gap:5px}#online-app .room-log{font-size:12px}#online-app .room-log p{margin:3px}#online-app .error{color:#ff978f}#online-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:12px 20px;border-radius:8px;background:#293d45;color:#fff;z-index:200;display:none;max-width:80vw}#online-toast.visible{display:block}
.native-board.online-split{display:flex;gap:8px}.native-board.online-split canvas{width:calc(50% - 4px)!important;min-width:0;height:100%}.online-readonly .native-shop{opacity:.6}.online-readonly .native-field-caption:before{content:'只读 / 等待';color:#9dccd6;margin-right:8px}
@media(max-width:700px){#online-app{padding:8px}#online-app .room-heading{flex-wrap:wrap}#online-app form{grid-template-columns:1fr}#online-app .player{min-width:125px}#online-app .social{flex-wrap:wrap}}
#online-app .strategy-card,#online-app .decision-card{white-space:normal;min-width:0;overflow:hidden;align-content:start}#online-app .strategy-card>*,#online-app .decision-card>*{min-width:0;overflow-wrap:anywhere;pointer-events:none}#online-connection{padding:4px 24px;color:#9cc8bd;background:#0b1b1e;font-size:12px}
/* 两个画布保持相同高度；原主画布的高度规则含 ID，右侧不能只靠 height:100%。 */
.native-board.online-split canvas{height:clamp(380px,64vh,680px)!important;border:1px solid #42685c}.online-split-label{position:absolute;top:8px;left:12px;color:#aed8cb;background:#0b1b1ecc;padding:4px 8px;font-size:12px;z-index:2;pointer-events:none}.online-split-label.right{left:calc(50% + 12px)}
html.native-landscape-ui .native-board.online-split canvas{height:100%!important}

/* 网络控件浮在原生游戏之上，只有标题栏可拖动，头像/按钮仍可点击。 */
#online-app #online-social.floating{position:fixed;z-index:60;width:300px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;background:#101e29f2;border:1px solid #5e8e96;border-radius:12px;box-shadow:0 8px 30px #0008;padding:10px;box-sizing:border-box}
#online-app .social-drag-handle{cursor:move;touch-action:none;user-select:none;padding:5px 4px 10px;color:#98dcd3;font-weight:600}
#online-app #online-social .players{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#online-app #online-social .player{min-width:0;padding:6px;font-size:12px;overflow:visible}
#online-app #online-social .player>span:last-child{min-width:0;overflow-wrap:anywhere}
#online-app .player-avatar-wrap{position:relative;flex-shrink:0}
#online-app .player-avatar-wrap .emote-bubble{position:absolute;left:25px;top:-12px;right:auto;z-index:2;font-size:26px;line-height:1.2;background:#23434bee;border-radius:12px;padding:2px;pointer-events:none;animation:online-emote-pop .18s ease-out}
#online-app .emote-bubble:empty{display:none}
#online-app #online-social .social{display:block}
#online-app #online-social .emotes{flex-wrap:wrap}
#online-app #online-social #phase-status{font-size:11px;margin:6px 0 0}
#online-app .online-briefing{max-width:960px;margin:auto;padding:16px;background:#15212c;border-radius:12px}
#online-app .online-briefing .native-ban-bonds{display:flex;gap:8px;flex-wrap:wrap}
#online-app .online-briefing .actions{margin-top:16px}
@keyframes online-emote-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

#online-app #online-social:not(.floating) .social-drag-handle{display:none}

/* 本地游戏表情：分类下拉 + 有限高度网格，避免素材数量撑满浮框。 */
#online-app .emote-category-label{font-size:12px;margin:8px 0}
#online-app #online-social .emotes{display:grid;grid-template-columns:repeat(5,48px);gap:5px;max-height:154px;overflow-y:auto}
#online-app #online-social .emotes button{padding:2px;min-width:0;width:48px;height:48px;box-sizing:border-box}
#online-app .emotes button img{display:block;width:100%;height:100%;max-height:42px;object-fit:contain;pointer-events:none}
#online-app .player-avatar-wrap .emote-bubble{left:24px;top:-30px;width:76px;height:76px;padding:3px;box-shadow:0 3px 10px #0006}
#online-app .emote-bubble img{width:100%;height:100%;object-fit:contain}
#online-app .player-avatar-wrap .emote-bubble:empty{display:none}