/* ChatBuild — EpikChat-fidelity theme (probe: probe/epikchat-blueprint.md) */
/* ===== Theme tokens (default = Midnight dark). Every surface/text/border reads a token,
   so switching data-theme-name re-skins the entire UI. Light themes flip text to dark. ===== */
/* Default = Facebook light. (The dark "midnight" theme is still available via the theme switcher below.) */
:root{
  --bg:#f0f2f5; --panel:#ffffff; --left:#ffffff; --header:#1877f2; --search:#f0f2f5;
  --title:#1877f2; --line:#dddfe2; --hover:#f2f2f2; --arrow:#e4e6eb; --muted:#8a8d91;
  --text:#050505; --text-dim:#65676b; --card:#ffffff; --elev:#e4e6eb; --sunken:#f0f2f5; --border:#ced0d4;
  --danger:#e41e3f; --success:#31a24c; --star:#f7b928;
  --fb-blue:#1877f2; --fb-navy:#1877f2; --fb-radius:8px; --fb-shadow:0 1px 2px rgba(0,0,0,.1);
}
/* Facebook Blue — the default theme. Chrome (navbar, modal/PM headers, banners) == accent. */
:root[data-theme-name="blue"]{
  --bg:#f0f2f5; --panel:#ffffff; --left:#ffffff; --header:#1877f2; --search:#f0f2f5;
  --title:#1877f2; --line:#dddfe2; --hover:#f2f2f2; --arrow:#e4e6eb; --muted:#8a8d91;
  --text:#050505; --text-dim:#65676b; --card:#ffffff; --elev:#e4e6eb; --sunken:#f0f2f5; --border:#ced0d4;
  --danger:#e41e3f; --success:#31a24c; --star:#f7b928;
}
:root[data-theme-name="midnight"]{
  --bg:#292b2f; --panel:#292b2f; --left:#26282b; --header:#1877f2; --search:#34363a;
  --title:#3097d1; --line:#1f2124; --hover:#33363b; --arrow:#4e4e4e; --muted:#7f858c;
  --text:#d7d9dc; --text-dim:#8b93a1; --card:#2c2f34; --elev:#34363a; --sunken:#1f2124; --border:#3a3f47;
  --danger:#cc4125; --success:#61c13e; --star:#e2cb88;
}
:root[data-theme-name="carbon"]{
  --bg:#131316; --panel:#131316; --left:#0f0f12; --header:#232327; --search:#232327;
  --title:#e0a33e; --line:#050506; --hover:#26262b; --arrow:#2e2e34; --muted:#7d7d85;
  --text:#dcdcde; --text-dim:#8b8b93; --card:#1c1c20; --elev:#26262b; --sunken:#050506; --border:#2e2e34;
  --danger:#cc4125; --success:#61c13e; --star:#e0a33e;
}
:root[data-theme-name="ocean"]{
  --bg:#0f2233; --panel:#0f2233; --left:#0b1b28; --header:#12456b; --search:#173247;
  --title:#4fc3f7; --line:#0b1a26; --hover:#173a52; --arrow:#2a4a60; --muted:#6f8ea3;
  --text:#d6e6f2; --text-dim:#7fa0b5; --card:#143247; --elev:#1a3d54; --sunken:#0b1a26; --border:#21455c;
  --danger:#e5544b; --success:#4ac97a; --star:#ffd86b;
}
:root[data-theme-name="dracula"]{
  --bg:#282a36; --panel:#282a36; --left:#21222c; --header:#44475a; --search:#343746;
  --title:#bd93f9; --line:#191a21; --hover:#343746; --arrow:#44475a; --muted:#8b8ea3;
  --text:#f8f8f2; --text-dim:#a6accd; --card:#2f3140; --elev:#3a3d4e; --sunken:#191a21; --border:#44475a;
  --danger:#ff5555; --success:#50fa7b; --star:#f1fa8c;
}
:root[data-theme-name="forest"]{
  --bg:#1c241e; --panel:#1c241e; --left:#171d18; --header:#2e5d3b; --search:#243026;
  --title:#8fce00; --line:#141a15; --hover:#26302a; --arrow:#33422f; --muted:#7f9079;
  --text:#dbe6d7; --text-dim:#90a58c; --card:#243026; --elev:#2c382e; --sunken:#141a15; --border:#33422f;
  --danger:#e5544b; --success:#8fce00; --star:#e2cb88;
}
/* ---- light themes (dark text on light surfaces) ---- */
:root[data-theme-name="light"]{
  --bg:#f4f5f7; --panel:#ffffff; --left:#eef0f3; --header:#1877f2; --search:#e6e8ec;
  --title:#2170a8; --line:#e0e2e6; --hover:#eceef1; --arrow:#c3c8d0; --muted:#6b7280;
  --text:#1c1f24; --text-dim:#5a6472; --card:#ffffff; --elev:#e9ecf0; --sunken:#eceef1; --border:#d7dbe0;
  --danger:#cc4125; --success:#2e9e4f; --star:#c9962a;
}
:root[data-theme-name="paper"]{
  --bg:#f3efe6; --panel:#fbf8f1; --left:#efe9dd; --header:#7a5c3a; --search:#ece5d6;
  --title:#b5742a; --line:#e2d9c7; --hover:#ece4d4; --arrow:#cdbfa4; --muted:#8a7c63;
  --text:#2b2620; --text-dim:#6b5f4c; --card:#fbf8f1; --elev:#ece3d2; --sunken:#ece4d4; --border:#ddd0ba;
  --danger:#b0402a; --success:#4a8a3c; --star:#b5742a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;overflow:hidden;display:flex;flex-direction:column}
a{color:var(--title);text-decoration:none}
i.fa-solid,i.fa-regular{cursor:pointer}

/* ---- header ---- */
.navbar{height:50px;background:var(--header);flex:0 0 50px;color:#fff}
.navbar-inner{height:100%;display:flex;align-items:center;padding:0 16px;gap:16px}
.logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.5px}
.chat-nav{flex:1;display:flex;justify-content:center;gap:40px;font-size:20px}
/* header is always a saturated colored bar → its content is light in every theme */
.chat-nav span{color:rgba(255,255,255,.72)}.chat-nav span:hover{color:#fff}
.top-right-nav{display:flex;align-items:center;gap:12px}
.btn-pill{background:rgba(255,255,255,.8);border:0;border-radius:999px;padding:6px 14px;font-size:13px;
  font-weight:600;color:#333;cursor:pointer;display:flex;align-items:center;gap:7px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.away{background:#e0a33e}.dot.online{background:#61c13e}
.user-pill{display:flex;align-items:center;gap:9px}
.user-pill .name{font-size:15px;color:#fff}
.avatar-wrap{width:32px;height:32px;border-radius:50%;background:#0006;display:inline-block;
  background-size:cover;background-position:center}

/* ---- main 3-column ---- */
.main{flex:1;display:flex;min-height:0}
.left{width:260px;flex:0 0 260px;background:var(--left);display:flex;flex-direction:column;min-height:0}
.center{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--panel)}
.right{width:264px;flex:0 0 264px;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line)}

/* ---- left online list ---- */
.list-section{display:flex;flex-direction:column;min-height:0;height:100%}
.list-header{padding:14px 14px 8px;font-size:15px}
.list-count b{color:var(--text)}
.list-search{padding:0 14px 8px;position:relative}
.list-sort{display:flex;align-items:center;gap:6px;padding:0 14px 8px}
.ls-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-right:2px}
.ls-btn{width:30px;height:26px;display:flex;align-items:center;justify-content:center;background:var(--search);border:1px solid var(--border);border-radius:6px;color:var(--text-dim);cursor:pointer;font-size:13px}
.ls-btn:hover{color:var(--text)}
.ls-btn.on{background:var(--title);border-color:var(--title);color:#fff}
.list-invite{margin:0 14px 10px;display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 28px);
  background:var(--title);color:#fff;border:0;border-radius:6px;padding:9px 12px;font-size:13px;font-weight:700;cursor:pointer}
.list-invite:hover{filter:brightness(1.06)}
.list-invite[hidden]{display:none}
.search{width:100%;background:var(--search);border:1px solid var(--border);border-radius:4px;color:var(--text);
  padding:7px 28px 7px 10px;font-size:14px;outline:none}
.searchClear{position:absolute;right:22px;top:6px;color:var(--muted)}
.user-list{flex:1;overflow-y:auto;min-height:0}
.user-item{height:50px;display:flex;align-items:center;gap:10px;padding:0 12px;cursor:pointer}
.user-item:hover{background:var(--hover)}
.u-av{width:34px;height:34px;border-radius:50%;flex:0 0 34px;background:var(--elev) center/cover;position:relative;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px}
.u-av .pres{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:#61c13e;border:2px solid var(--left)}
.u-meta{flex:1;min-width:0}
.u-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-sub{display:flex;gap:5px;align-items:center;color:var(--muted);font-size:12px}
.u-cam{color:#61c13e}

/* ---- cam dock ---- */
.cam-dock{flex:0 0 auto;display:flex;gap:6px;padding:8px;min-height:0;flex-wrap:wrap;background:var(--panel)}
.cam-dock:empty{display:none}
.bcst-player{width:200px;height:150px;background:#333;border-radius:3px;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;color:#fff;font-size:12px}
.bcst-player .cc{position:absolute;top:6px;right:6px;background:#0009;border-radius:3px;padding:1px 5px;font-size:10px}
.bcst-player .who{padding:6px 8px;background:linear-gradient(transparent,#000a);width:100%}
.bcst-player.brb{background:var(--card)}

/* ---- room strip ---- */
.tabbar{height:60px;flex:0 0 60px;display:flex;align-items:center;gap:4px;padding:0 6px;border-bottom:1px solid var(--line)}
.nav-btn{display:none;width:22px;height:40px;background:var(--arrow);border:0;color:var(--text-dim);border-radius:3px;cursor:pointer}
.tabbar.has-overflow .nav-btn{display:inline-block}   /* arrows appear only when the room strip overflows */
.strip{flex:1;display:flex;gap:8px;overflow-x:auto;height:60px;align-items:center;padding:0 2px}
.strip::-webkit-scrollbar{height:0}
.room-ava{width:44px;height:44px;border-radius:50%;flex:0 0 44px;background:var(--elev) center/cover;cursor:pointer;
  border:2px solid transparent;position:relative;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:15px}
.room-ava.active{border-color:var(--title)}
.room-ava .badge{position:absolute;top:-2px;right:-2px;background:#cc4125;color:#fff;font-size:10px;
  min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* ---- tab header (room name/topic) ---- */
.tab-header{height:40px;flex:0 0 40px;display:flex;align-items:center;gap:14px;padding:0 14px;border-bottom:1px solid var(--line)}
.tab-header .title{color:var(--title);font-weight:700}
.tab-header .description{flex:1;color:var(--text);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab-options{display:flex;align-items:center;gap:12px;color:var(--text-dim);font-size:15px}
.fav-count{color:var(--muted);font-size:13px}
.tab-sep{width:1px;height:18px;background:var(--border);margin:0 2px}

/* ---- messages ---- */
.messages{flex:1;overflow-y:auto;min-height:0;padding:10px 16px}
.msg{display:flex;gap:12px;padding:8px 0}
.msg .m-av{width:40px;height:40px;border-radius:50%;flex:0 0 40px;background:var(--elev) center/cover;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:15px}
.msg .m-body{min-width:0}
.msg .m-head{display:flex;align-items:baseline;gap:8px}
.msg .user-name{font-weight:700}
.msg .time-stamp{color:var(--muted);font-size:12px}
.msg .message-text{color:var(--text);white-space:pre-wrap;word-break:break-word;line-height:1.45}
.msg.system{justify-content:center;color:var(--muted);font-size:12px;font-style:italic;padding:4px 0}

/* ---- composer ---- */
.composer{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);position:relative}
/* jump-to-latest: floats just above the composer, shown only when scrolled up */
.scroll-bottom{position:absolute;bottom:calc(100% + 8px);right:14px;height:34px;padding:0 12px;border:0;border-radius:18px;background:var(--title);color:#fff;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.4);display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;z-index:6}
.scroll-bottom[hidden]{display:none}
.scroll-bottom .sb-label{display:none}
.scroll-bottom.newmsg .sb-label{display:inline}
.scroll-bottom.newmsg{background:var(--danger)}
.composer-globe{width:28px;height:28px;border-radius:50%;border:2px solid var(--title);display:flex;
  align-items:center;justify-content:center;color:var(--title);font-size:13px;flex:0 0 28px}
.composer-input{flex:1;min-width:0;min-height:24px;max-height:120px;overflow-y:auto;overflow-wrap:anywhere;outline:none;color:var(--text);
  padding:6px 4px}
.composer-input:empty:before{content:attr(data-ph);color:var(--muted)}
.composer-tools{display:flex;align-items:center;gap:14px;color:var(--text-dim);font-size:16px}
.composer-tools .gif{font-size:12px;font-weight:800;border:1px solid var(--text-dim);border-radius:3px;padding:0 4px;cursor:pointer}

/* ---- right sidebar ---- */
.right-tabs{height:50px;display:flex;align-items:center;gap:8px;padding:0 12px;justify-content:flex-end}
.rtab{width:40px;height:34px;background:var(--card);border:0;color:var(--text-dim);border-radius:6px;cursor:pointer}
.rtab.active{background:var(--elev);color:var(--text)}
.right-body{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;min-width:0;padding:0 14px 14px}
.rsec{margin-top:14px}
.rsec-h{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}
.r-item{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer}
.r-item:hover{color:var(--title)}
.r-ava{width:30px;height:30px;border-radius:50%;flex:0 0 30px;background:var(--elev) center/cover;display:flex;
  align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:12px}
.r-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-count{color:var(--muted);font-size:12px}
.doodles{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;min-width:0;padding-bottom:4px;scrollbar-width:thin}
.doodle-fig{display:flex;flex-direction:column;gap:3px;flex:0 0 auto;width:64px}
.doodle-by{font-size:10px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;max-width:64px}
.doodle{width:64px;height:44px;border-radius:6px;background:var(--elev) center/cover;flex:0 0 auto}
.rfooter{margin-top:18px;color:var(--text-dim);font-size:12px;line-height:1.7}

/* ---- modals ---- */
.modal-backdrop{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:50}
.modal-backdrop[hidden]{display:none}
.modal{background:var(--card);border:1px solid var(--line);border-radius:10px;width:360px;overflow:hidden}
.modal-h{background:var(--header);color:#fff;padding:12px 16px;font-weight:700;display:flex;justify-content:space-between}
.modal-b{padding:16px;display:flex;flex-direction:column;gap:12px}
.modal-b label{display:flex;flex-direction:column;gap:6px;font-size:14px}
.modal-b label.row{flex-direction:row;align-items:center;gap:8px}
.modal-b input[type=text],.modal-b input:not([type]){background:var(--search);border:1px solid var(--border);border-radius:4px;
  color:var(--text);padding:8px 10px;outline:none}
.save{background:var(--title);border:0;color:#fff;font-weight:700;padding:10px;border-radius:6px;cursor:pointer}

/* ---- cam bar + dock ---- */
.cam-bar{display:flex;align-items:center;gap:14px;padding:6px 10px;border-bottom:1px solid var(--line)}
.cam-btn{background:var(--title);border:0;color:#fff;font-weight:700;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px}
.cam-btn.live{background:#cc4125}
/* cam grid/stack toggle now lives in the top-right tabs, next to home/friends/gallery */
.right-tabs .cam-layout-toggle{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:6px;padding:0 10px;height:34px;color:var(--text-dim);font-size:14px}
.right-tabs .cam-layout-toggle[hidden]{display:none}
.right-tabs .cam-layout-toggle i{cursor:pointer}
.right-tabs .cam-layout-toggle .active{color:var(--title)}
.cam-dock{display:flex;gap:6px;padding:8px;flex-wrap:wrap;background:var(--panel);max-height:340px;overflow:auto}
.cam-dock:empty{display:none}
.cam-dock.stacked{flex-direction:column;flex-wrap:nowrap;align-items:center}
.cam-tile{width:220px;height:165px;background:#111;border-radius:4px;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.cam-dock.stacked .cam-tile{width:340px;height:255px}
.cam-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
.cam-tile .who{position:relative;z-index:2;padding:5px 8px;font-size:12px;color:#fff;width:100%;background:linear-gradient(transparent,#000b)}
.cam-tile .cam-x{position:absolute;top:4px;right:6px;z-index:3;color:#fff;cursor:pointer;background:#0008;border-radius:3px;padding:1px 5px}
.cam-tile.me{outline:2px solid var(--title)}
.cam-ctrl{position:absolute;z-index:4;color:#fff;background:#0007;border-radius:4px;padding:2px 6px;font-size:12px;
  cursor:pointer;line-height:1.4;opacity:0;transition:opacity .12s}
.cam-tile:hover .cam-ctrl{opacity:.92}
.cam-ctrl:hover{background:#000c}
.cam-ctrl.off{color:#ff8a80}.cam-ctrl.on{color:#61c13e}
.cam-tl{top:6px;left:6px}
.cam-tr{position:absolute;top:6px;right:6px;z-index:4;display:flex;gap:6px}
.cam-tr .cam-ctrl{position:static;opacity:0}
.cam-tile:hover .cam-tr .cam-ctrl{opacity:.92}
.cam-center{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px}
.cam-center .cam-ctrl{position:static;padding:6px 9px;font-size:14px}
.cam-star{bottom:6px;right:8px;background:transparent;color:#e2cb88}
.cam-star.on{color:#e2cb88}
.room-create{width:40px;height:40px;background:var(--elev);border:0;color:#9be;border-radius:6px;cursor:pointer;flex:0 0 40px}
.room-create:hover{color:#fff;background:var(--border)}

/* ---- context menu ---- */
.ctx-menu{position:fixed;z-index:80;background:var(--card);border:1px solid var(--sunken);border-radius:8px;
  min-width:170px;box-shadow:0 10px 30px #000a;overflow:hidden;padding:4px 0}
.ctx-menu[hidden]{display:none}
.ctx-menu .ci{padding:8px 14px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:10px}
.ctx-menu .ci:hover{background:var(--title);color:#fff}
.ctx-menu .ci.danger:hover{background:#cc4125}
.ctx-menu .sep{height:1px;background:var(--sunken);margin:4px 0}
.ctx-menu .ci i{width:16px;text-align:center;color:var(--text-dim)}
.ctx-menu .ci:hover i{color:#fff}

/* ---- PM windows ---- */
/* Dock lives in the right rail only (max-width) so DM windows never reach left over the composer input.
   Overflow wraps UPWARD (wrap-reverse) into rows above instead of sprawling across the chat. */
.pm-wrap{position:fixed;right:12px;bottom:0;z-index:70;display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;
  gap:10px;align-items:flex-end;max-width:400px;max-height:calc(100vh - 130px);pointer-events:none}
.pm-wrap>*{pointer-events:auto}
.pm-win{width:280px;background:var(--card);border:1px solid var(--sunken);border-bottom:0;border-radius:8px 8px 0 0;
  display:flex;flex-direction:column;height:340px;max-height:calc(100vh - 140px);box-shadow:0 6px 24px #0007}
.pm-head{background:var(--header);color:#fff;padding:8px 12px;font-weight:700;display:flex;justify-content:space-between;
  border-radius:8px 8px 0 0;cursor:pointer;font-size:14px}
.pm-head .x{cursor:pointer}
.pm-body{flex:1;overflow-y:auto;padding:8px 10px;font-size:14px;display:flex;flex-direction:column;gap:4px}
.pm-line b{font-weight:700}
.pm-input{border-top:1px solid var(--sunken);padding:8px;display:flex}
.pm-input input{flex:1;background:var(--search);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:7px 9px;outline:none}
.pm-win.min .pm-body,.pm-win.min .pm-input{display:none}
.pm-win.min{height:auto;width:190px}   /* compact tab so several minimized DMs sit tidily in the right rail */
.pm-win.unread .pm-head span:first-child::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff5c5c;margin-left:7px;vertical-align:middle}

/* ---- Poke buzz ---- */
@keyframes cb-poke{0%,100%{transform:translateX(0)}15%{transform:translateX(-7px)}30%{transform:translateX(7px)}45%{transform:translateX(-5px)}60%{transform:translateX(5px)}75%{transform:translateX(-3px)}90%{transform:translateX(3px)}}
.poke-buzz{animation:cb-poke .55s ease-in-out}
@media (prefers-reduced-motion:reduce){.poke-buzz{animation:none}}

/* ---- toasts ---- */
.toasts{position:fixed;right:14px;top:62px;z-index:90;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--card);border:1px solid var(--sunken);border-left:3px solid var(--title);border-radius:8px;
  padding:10px 14px;min-width:200px;box-shadow:0 6px 20px #0008;font-size:14px;animation:toastin .2s ease}
.toast .t-title{font-weight:700;margin-bottom:2px}
@keyframes toastin{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

.bans-list .ban-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--sunken)}
.bans-list .unban{background:var(--title);border:0;color:#fff;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:12px}

/* role badges in user list */
.role-badge{font-size:9px;text-transform:uppercase;letter-spacing:.04em;padding:1px 5px;border-radius:3px;margin-left:6px;font-weight:700}
.role-owner{background:#e2cb88;color:#3a2f10}.role-admin{background:#cc4125;color:#fff}.role-mod{background:#3fbfbf;color:#083}

/* ---- header live cam icon ---- */
#btn-cam.live{color:#cc4125!important}
.cam-bar-label{color:var(--text-dim);font-size:13px}
.cam-bar[hidden]{display:none}
/* user-row right-side cam/lock icon */
.user-item .u-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.u-camicon{color:#61c13e;font-size:13px}
.u-lock{color:#e2cb88;font-size:12px}

/* ---- wide/tall modals ---- */
.modal-wide{width:520px}.modal-tall{width:460px}
.modal-b.nopad{padding:0}

/* ---- settings dropdown ---- */
.dropdown{position:fixed;z-index:80;background:var(--card);border:1px solid var(--border);border-radius:10px;
  width:250px;box-shadow:0 12px 34px #000b;padding:6px 0;color:var(--text)}
.dropdown[hidden]{display:none}
.dd-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;font-size:14px;color:var(--text)}
.dd-item:hover{background:var(--elev)}
.dd-item i:first-child{width:18px;text-align:center;color:var(--text-dim)}
.dd-item .chev{margin-left:auto;color:var(--text-dim);font-size:12px}
.dd-dot{width:8px;height:8px;border-radius:50%;background:#3097d1;margin-left:auto}
.dd-dot + .chev{margin-left:8px}
.dd-sep{height:1px;background:var(--sunken);margin:6px 0}
.dd-foot{padding:8px 16px 4px;color:var(--text-dim);font-size:12px}

/* ---- stream modal ---- */
.picker{display:flex;gap:6px;align-items:center}
.picker select{flex:1;background:var(--search);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:8px 10px;outline:none}
.picker-btn{width:38px;height:36px;background:var(--border);border:0;border-radius:6px;color:var(--text-dim);cursor:pointer}
.picker-btn.on{background:var(--title);color:#fff}
.stream-row{display:flex;gap:16px;align-items:flex-start;margin-top:4px}
.stream-toggles{flex:1;display:flex;flex-direction:column;gap:14px}
.tgl{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.tgl small{color:var(--text-dim)}
.tgl input[type=checkbox]{appearance:none;width:40px;height:22px;background:#4a4f57;border-radius:999px;position:relative;cursor:pointer;transition:.15s}
.tgl input[type=checkbox]:checked{background:#61c13e}
.tgl input[type=checkbox]:before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.15s}
.tgl input[type=checkbox]:checked:before{left:20px}
.stream-preview{width:150px;height:100px;background:#111;border-radius:6px;position:relative;overflow:hidden;flex:0 0 150px}
.stream-preview video{width:100%;height:100%;object-fit:cover}
.stream-preview .cc{position:absolute;top:4px;right:4px;background:#0009;font-size:10px;padding:1px 4px;border-radius:3px;color:#fff}
.stream-actions{display:flex;gap:10px;margin-top:6px}
.save.green{background:#3aa856;flex:1}.save.ghost{background:var(--border);flex:0 0 auto}

/* ---- chat groups ---- */
.groups-search{padding:14px 16px 8px}
.groups-search input{width:100%;background:var(--search);border:1px solid var(--border);border-radius:999px;color:var(--text);padding:9px 14px;outline:none}
.groups-list{max-height:420px;overflow-y:auto;padding:0 8px 10px}
.group-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer}
.group-item:hover{background:var(--elev)}
.group-item.newg .g-ava{background:#3aa856;color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center}
.g-ava{width:40px;height:40px;border-radius:50%;flex:0 0 40px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.g-meta{flex:1;min-width:0}
.g-name{font-weight:600}
.g-topic{color:var(--text-dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-count{color:var(--muted);font-size:13px;white-space:nowrap}

/* scrollbars */
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#44474d;border-radius:4px}

/* ===== composer popovers, emoji, gif, color, status, cc, media ===== */
.pop{position:fixed;z-index:2000;background:var(--card);border:1px solid var(--sunken);border-radius:12px;
  width:320px;box-shadow:0 14px 40px #000b;padding:10px;max-height:360px;overflow:hidden;display:flex;flex-direction:column}
.pop[hidden]{display:none}
.pop-h{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:0 2px 8px}
.pop-search{width:100%;background:var(--search);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px 12px;outline:none;margin-bottom:8px}
.emoji-grid{overflow-y:auto;display:flex;flex-wrap:wrap;gap:2px;align-content:flex-start}
.emoji-cat{width:100%;font-size:11px;text-transform:uppercase;color:var(--text-dim);margin:8px 2px 2px}
.emoji{font-size:20px;padding:4px;cursor:pointer;border-radius:6px;line-height:1}
.emoji:hover{background:var(--border)}
.gif-grid{overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gif-thumb{width:100%;border-radius:6px;cursor:pointer;display:block}
.gif-thumb:hover{outline:2px solid var(--title)}
.color-pop{width:210px}
.color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:8px}
.color-swatch{width:26px;height:26px;border-radius:6px;cursor:pointer;border:2px solid transparent}
.color-swatch:hover,.color-swatch.sel{border-color:#fff}
.color-auto{background:var(--border);color:var(--text-dim);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.color-custom{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);cursor:pointer}
.color-custom input{width:28px;height:24px;border:0;background:none;cursor:pointer}
.status-menu{width:180px}
.dot.busy{background:#cc4125}.dot.invisible{background:var(--text-dim)}
#status-pill{cursor:pointer}
#cc-bar{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);z-index:60;background:#000c;color:#fff;
  padding:8px 16px;border-radius:8px;font-size:15px;max-width:70%;text-align:center;display:none}
.message-media-wrap{margin-top:4px}
.message-media{max-width:260px;max-height:260px;border-radius:8px;cursor:pointer;display:block}
.rsec-empty{color:var(--text-dim);font-size:13px;padding:2px 0}
.r-lock{margin-left:-8px;color:#e2cb88;font-size:9px;align-self:flex-end}
.composer-tools .fa-volume-high,.composer-tools .fa-closed-captioning{transition:color .1s}
/* theme picker */
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.theme-sw{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--sunken);border-radius:8px;cursor:pointer;font-size:13px;background:var(--card)}
.theme-sw:hover{background:var(--elev)}
.theme-sw.sel{border-color:var(--title)}
.theme-dots{display:flex;gap:3px}
.theme-dots i{width:12px;height:12px;border-radius:50%;display:inline-block}
/* Room/Viewers tabs + bot badge */
.list-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px}
.list-tabs{display:flex;gap:4px}
.ltab{background:var(--elev);border:0;color:var(--text-dim);font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;position:relative}
.ltab.active{background:var(--title);color:#fff}
.ltab-badge{background:#cc4125;color:#fff;border-radius:9px;padding:0 5px;font-size:10px;margin-left:4px}
.role-bot{background:#8fce00;color:#173}
/* Doodle board */
.modal-doodle{width:auto}
.doodle-tools{display:flex;align-items:center;gap:10px;padding:12px 16px;flex-wrap:wrap}
.dt-colors,.dt-sizes{display:flex;gap:4px;align-items:center}
.dt-swatch{width:22px;height:22px;border-radius:5px;cursor:pointer;border:2px solid transparent}
.dt-swatch:hover,.dt-swatch.sel{border-color:#fff}
#dt-custom{width:28px;height:24px;border:0;background:none;cursor:pointer;padding:0}
.dt-size{width:26px;height:26px;border-radius:6px;background:var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer}
.dt-size.sel{background:var(--title)}
.dt-dot{background:#fff;border-radius:50%;display:inline-block}
.dt-btn{width:30px;height:28px;background:var(--border);border:0;color:var(--text-dim);border-radius:6px;cursor:pointer}
.dt-btn.on{background:var(--title);color:#fff}
#doodle-canvas{display:block;margin:0 16px;background:#fff;border-radius:6px;cursor:crosshair;touch-action:none;max-width:calc(100vw - 80px)}
.doodle-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 16px}
.doodle{width:64px;height:44px;border-radius:6px;object-fit:cover;cursor:pointer;background:var(--elev)}
/* cam reconnecting state (keeps tile, no flicker) */
.cam-tile.reconnecting video{opacity:.35;filter:grayscale(.5)}
.cam-tile.reconnecting:after{content:"reconnecting…";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;background:#0006;z-index:2}
/* ===== Games & modules ===== */
.games-list{max-height:440px;overflow-y:auto;padding:0 8px 12px}
.games-cat{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:12px 8px 4px;display:flex;justify-content:space-between}
.games-cat span{color:#61c13e}
.game-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;cursor:pointer}
.game-item:hover{background:var(--elev)}
.game-item.soon{opacity:.5;cursor:default}
.game-ico{width:36px;height:36px;border-radius:9px;flex:0 0 36px;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
.game-name{font-weight:600}
.game-sub{color:var(--text-dim);font-size:12px}
.chal-btns{display:flex;gap:8px;margin-top:8px}
.chal-btns button{border:0;border-radius:6px;padding:5px 12px;font-weight:700;cursor:pointer}
.chal-a{background:#3aa856;color:#fff}.chal-d{background:var(--border);color:var(--text-dim)}
/* game surface */
#game-surface{flex:0 0 auto;background:var(--card);border-bottom:1px solid var(--line);padding:10px 14px;max-height:52vh;overflow:auto}
#game-surface[hidden]{display:none}
.gs-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.gs-name{font-weight:700}
.gs-turn{color:var(--text-dim);font-size:13px}
.gs-close{margin-left:auto;color:var(--text-dim);cursor:pointer}
.gs-board{display:flex;flex-direction:column;align-items:center;gap:8px}
.gs-grid{display:grid;gap:4px;background:var(--sunken);padding:6px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--border)}
.gs-cell{width:46px;height:46px;background:var(--elev);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer}
.gs-cell:hover{background:var(--hover);border-color:var(--title)}
.gs-grid.small .gs-cell.sm{width:20px;height:20px;font-size:12px;border-radius:3px}
.gs-rps{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.gs-rps-btn{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:22px;cursor:pointer;color:var(--text);min-width:64px}
.gs-rps-btn:hover:not(:disabled){background:var(--border)}.gs-rps-btn:disabled{opacity:.5}
.gs-rps-btn small{font-size:11px;color:var(--text-dim)}
.gs-reveal{font-size:34px}
.gs-nim-row{display:flex;gap:6px;margin:2px 0}
.gs-stone{font-size:22px;color:#e2cb88;cursor:pointer}.gs-stone:hover{color:#fff}
.gs-hint{color:var(--text-dim);font-size:12px;text-align:center}
.gs-dice{display:flex;gap:20px;font-size:20px}
.gs-die-set{font-size:16px}
.gs-btn{background:var(--title);border:0;color:#fff;font-weight:700;padding:8px 16px;border-radius:8px;cursor:pointer}
.gs-btn.danger{background:#cc4125}
.gs-input{width:90px;background:var(--search);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:7px 10px;margin-right:8px}
.gs-word{font-size:26px;letter-spacing:6px;font-family:monospace}
.gs-letters{display:flex;flex-wrap:wrap;gap:3px;max-width:420px;justify-content:center}
.gs-let{width:28px;height:28px;background:var(--card);border:0;border-radius:5px;color:var(--text);cursor:pointer;font-weight:700}
.gs-let:hover:not(:disabled){background:var(--title);color:#fff}.gs-let.used{opacity:.35}
.gs-wyr{display:flex;align-items:center;gap:12px;max-width:520px}
.gs-wyr-opt{flex:1;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;color:var(--text);text-align:left}
.gs-wyr-opt:hover{background:var(--elev)}
.gs-bar{height:6px;background:var(--sunken);border-radius:3px;margin:8px 0 4px;overflow:hidden}
.gs-bar span{display:block;height:100%;background:var(--title)}
.gs-or{color:var(--text-dim);font-weight:700}
/* last-move + win highlighting on grids */
.gs-cell.last{box-shadow:inset 0 0 0 2px var(--title);animation:gs-pop .28s ease}
.gs-cell.win{background:#2f7d4e;color:#fff;box-shadow:inset 0 0 0 2px #7fe0a4}
@keyframes gs-pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
/* coin flip */
.gs-coin{display:flex;flex-direction:column;align-items:center;gap:12px}
.gs-coinface{font-size:26px;font-weight:800;letter-spacing:2px;animation:gs-pop .3s ease}
/* cards: hi-lo + war */
.gs-card{font-size:30px;font-weight:800;background:var(--card);border-radius:10px;padding:12px 22px;min-width:120px;text-align:center;box-shadow:inset 0 0 0 1px var(--border)}
/* chopsticks */
.gs-chop-row{display:flex;align-items:center;gap:10px;margin:3px 0}
.gs-chop-lbl{width:46px;color:var(--text-dim);font-size:12px;font-weight:700}
.gs-hand{background:var(--card);border:2px solid var(--border);border-radius:10px;min-width:70px;padding:10px;font-size:18px;color:var(--text);cursor:default}
.gs-hand.mine{cursor:pointer}.gs-hand.mine:hover{border-color:var(--title)}
.gs-hand.sel{border-color:var(--title);background:var(--elev)}
.gs-hand.dead{opacity:.35;text-decoration:line-through}
/* word input games */
.gs-prompt{font-size:20px;font-weight:700;text-align:center}
.gs-inline{display:flex;gap:8px;align-items:center}
.gs-input2{background:var(--search);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:8px 12px;min-width:180px}
.gs-prompt.big{font-size:40px;letter-spacing:6px}
/* memory match */
.gs-cell.mem{font-size:22px;transition:background .15s}
.gs-cell.mem.down{background:#26507a;color:#9fc4e8}
.gs-cell.mem.down:hover{background:#2f629a}
.gs-cell.mem.up{background:var(--border)}
.gs-cell.mem.matched{background:#2f7d4e;opacity:.75;cursor:default}
/* arcade */
.ar-canvas{background:#12151a;border-radius:8px;max-width:100%;touch-action:none;cursor:none;display:block;margin:0 auto}
.ar-hint{margin-top:6px}
.ar-score{font-variant-numeric:tabular-nums;letter-spacing:1px}
/* presence: in-game + now-playing */
.u-sub.playing{color:#4ac97a;font-weight:600}
.u-sub.nowplaying{color:#c98fe0}
.pres.ingame{background:#4ac97a!important;box-shadow:0 0 0 2px var(--card),0 0 6px #4ac97a}
/* profile card */
#profile-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1200}
.profile-card{width:380px;max-width:94vw;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.pf-top{display:flex;align-items:center;gap:12px;padding:18px 16px;background:linear-gradient(120deg,var(--pf,#1877f2),var(--card))}
.pf-av{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:#fff;border:3px solid var(--card)}
.pf-name{font-size:19px;font-weight:800;color:#fff}
.pf-playing{color:#8ff0b3;font-size:13px;font-weight:600}
.pf-now{color:#e0b6f0;font-size:13px}.pf-idle{color:var(--text-dim);font-size:13px}
.pf-x{margin-left:auto;color:var(--text-dim);cursor:pointer;font-size:18px}
.pf-stats{display:flex;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border)}
.pf-tot{flex:1;text-align:center;background:var(--card);border-radius:8px;padding:10px}
.pf-tot b{display:block;font-size:20px;color:var(--text)}.pf-tot span{font-size:11px;color:var(--text-dim)}
.pf-table{width:100%;border-collapse:collapse;font-size:13px}
.pf-table th{text-align:left;color:var(--text-dim);font-weight:600;padding:8px 16px;background:var(--card)}
.pf-table td{padding:7px 16px;border-top:1px solid var(--border);color:var(--text)}
.pf-table td:not(:first-child){text-align:center;width:52px}
.pf-empty{text-align:center!important;color:var(--text-dim);padding:16px!important}
.pf-status{padding:14px 16px;border-top:1px solid var(--border)}
.pf-status label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:6px}
.pf-status-row{display:flex;gap:8px}
.pf-status-row input{flex:1;background:var(--search,#111);border:1px solid var(--border);border-radius:6px;color:var(--text,#fff);padding:8px 10px}
.pf-status-row button{background:var(--title,#1877f2);border:0;color:#fff;font-weight:700;padding:8px 14px;border-radius:6px;cursor:pointer}
.pf-hint{font-size:11px;color:var(--text-dim);margin-top:6px}
/* TTS options panel */
.tts-switch{display:flex;align-items:center;gap:8px;padding:8px 0;color:var(--text);cursor:pointer;font-weight:600}
.tts-switch.small{font-weight:400;font-size:13px;color:var(--text-dim)}
.tts-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.tts-lbl{width:64px;color:var(--text-dim);font-size:13px;flex:none}
.tts-slide{display:flex;align-items:center;gap:10px;flex:1}
.tts-slide input[type=range]{flex:1}
.tts-val{width:44px;text-align:right;color:var(--text);font-variant-numeric:tabular-nums;font-size:13px}
.tts-voice{flex:1;background:var(--search);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:7px 8px;max-width:100%}
.tts-btns{display:flex;gap:8px;margin-top:14px}
.tts-hint{font-size:12px;color:var(--text-dim);margin-top:10px}
/* pop-out chat */
#chat-panel{display:flex;flex-direction:column;flex:1;min-height:0}
.pip-body{margin:0;height:100vh;display:flex;flex-direction:column;background:var(--bg,#292b2f)}
.pip-body #chat-panel{height:100vh}
.pip-holder{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-dim);font-size:14px;border:2px dashed var(--border);border-radius:10px;margin:12px}
#chat-panel.floating{position:fixed;top:80px;left:60px;width:440px;height:560px;z-index:1500;background:var(--bg,#292b2f);border:1px solid var(--border);border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.6);overflow:hidden}
.float-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--header,#1877f2);color:#fff;cursor:move;font-weight:700}
.float-bar i{cursor:pointer}
/* header theme toggle */
.btn-icon{background:transparent;border:0;color:rgba(255,255,255,.82);font-size:16px;cursor:pointer;width:32px;height:32px;border-radius:8px}
.btn-icon:hover{background:rgba(255,255,255,.12)}
/* reversi legal-move hint */
.gs-cell.legal{box-shadow:inset 0 0 0 2px rgba(97,193,62,.6);cursor:pointer}
.gs-cell.legal::after{content:"";width:8px;height:8px;border-radius:50%;background:rgba(97,193,62,.5);position:absolute}
.gs-cell{position:relative}
/* checkers */
.gs-grid.gs-checkers{gap:0;padding:4px;background:var(--sunken)}
.gs-checkers .gs-cell.ck{width:40px;height:40px;border:0;border-radius:0}
.gs-checkers .ck.dark{background:#8a6a44}.gs-checkers .ck.lite{background:#e8d3a8}
.gs-checkers .ck.sel{outline:3px solid #61c13e;outline-offset:-3px}
.ck-pc{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 2px 3px rgba(0,0,0,.4)}
.ck-pc.p0{background:radial-gradient(circle at 35% 30%,#ff6b5e,#c0392b)}
.ck-pc.p1{background:radial-gradient(circle at 35% 30%,#4a4a4f,#18181b)}
.ck-pc.king{color:#ffd86b}
/* blackjack */
.bj-row{padding:7px 10px;margin:3px 0;background:var(--card);border-radius:8px;color:var(--text);min-width:220px}
.bj-row.me{box-shadow:inset 0 0 0 1px var(--title)}
.bj-card{display:inline-block;background:#fff;color:#111;border-radius:4px;padding:1px 7px;margin:0 2px;font-weight:800;min-width:16px;text-align:center}
/* favorite-streamer star in the streamers list */
.r-favstar{margin-left:6px;color:#4a4d53;cursor:pointer;font-size:13px}
.r-favstar:hover{color:#e2cb88}
.r-favstar.on{color:#e2cb88}
.r-item{position:relative}
/* Watch Party layout: virtual desktop center, cams as a top strip, chat overlaid */
.wp-mode .center{position:relative}
.wp-mode .cam-bar{display:none}   /* keep the rooms strip (.tabbar) visible even in watch-party mode */
/* cams sit as an in-flow strip ABOVE the VM (not an overlay) so they never block the Hyperbeam browser's top/tabs */
.wp-mode .cam-dock{flex:0 0 auto;flex-direction:row;flex-wrap:nowrap;gap:6px;max-height:104px;overflow-x:auto;overflow-y:hidden;background:var(--panel);padding:6px}
.wp-mode .cam-dock:empty{display:none}
.wp-mode .cam-dock .cam-tile{width:130px;height:92px;flex:none;margin:0}
#watchparty{display:flex;flex-direction:column;flex:1;min-height:0}
.wp-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:#111;color:#fff;font-weight:700;font-size:13px}
.wp-stop{background:#cc4125;border:0;color:#fff;padding:5px 12px;border-radius:6px;cursor:pointer;font-weight:700}
.wp-frame{flex:1;width:100%;min-height:0;border:0;background:#000;position:relative;overflow:hidden}
.wp-frame > *,.wp-frame canvas,.wp-frame video{width:100%;height:100%}
.wp-frame video{object-fit:contain}
.wp-mode #chat-panel .tab-header{display:none}
/* drag header — only present while floating in watch-party mode; grab anywhere on the bar to move */
.wp-chat-head{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;background:var(--elev);border-bottom:1px solid var(--border);font-size:12px;color:var(--text);font-weight:700;flex:0 0 auto}
body.wp-chat-float .wp-chat-head{cursor:grab}
body.wp-chat-float .wp-chat-head:active{cursor:grabbing}
.wpc-grip{display:flex;align-items:center;gap:6px}
.wpc-btn{cursor:pointer;padding:2px 7px;border-radius:5px;color:var(--text-dim)}
.wpc-btn:hover{background:var(--hover);color:var(--text)}
/* FLOAT: the original draggable glass overlay over the video */
body.wp-chat-float #chat-panel{position:fixed;bottom:14px;left:14px;width:340px;height:46%;min-height:220px;z-index:1200;background:rgba(18,20,24,.80);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);border-radius:12px;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,.55)}
body.wp-chat-float #chat-panel .messages{background:transparent}
body.wp-chat-float #chat-panel .composer{background:rgba(0,0,0,.35)}
/* narrow float: input gets a full row, tools drop to their own row (same as dock-right) so the text field isn't crushed */
body.wp-chat-float #chat-panel .composer{flex-wrap:wrap;gap:8px}
body.wp-chat-float #chat-panel .composer-input{min-width:0}
body.wp-chat-float #chat-panel .composer-tools{flex:1 1 100%;justify-content:space-between;gap:8px}
/* DOCK RIGHT: chat lives in the right column as a tab (shown only when its tab is active) */
body.wp-chat-right #chat-panel{flex:1 1 auto;min-height:0;background:var(--panel)}
body.wp-chat-right #chat-panel.rtab-hidden{display:none}
/* narrow column: give the input a full row and drop the tools onto their own row so text stays horizontal */
body.wp-chat-right #chat-panel .composer{flex-wrap:wrap;gap:8px}
body.wp-chat-right #chat-panel .composer-input{min-width:0}
body.wp-chat-right #chat-panel .composer-tools{flex:1 1 100%;justify-content:space-between;gap:8px}
.rtab.rtab-chat{position:relative}
/* keep shared media (GIFs/images) inside the column width when docked or floating */
body.wp-chat-right #chat-panel img,body.wp-chat-right #chat-panel video,
body.wp-chat-float #chat-panel img,body.wp-chat-float #chat-panel video{max-width:100%;height:auto}
.gs-tod{display:flex;gap:12px}
.gs-tod-prompt{font-size:16px;text-align:center;max-width:520px;line-height:1.5}
.gs-over{margin-top:8px;font-weight:700;color:#61c13e;text-align:center}
/* inline game invite in chat */
.msg.invite{padding:6px 0}
.invite-card{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--title);border-radius:10px;padding:12px 14px;max-width:420px}
.invite-txt{margin-bottom:8px}
.invite-btns{display:flex;gap:8px}
.invite-btns button{border:0;border-radius:6px;padding:6px 16px;font-weight:700;cursor:pointer}
.iv-a{background:#3aa856;color:#fff}.iv-d{background:var(--border);color:var(--text-dim)}
/* snakes & ladders */
.gs-grid.snl{gap:1px}
.gs-cell.snlc{width:40px;height:40px;background:var(--card);border-radius:3px;position:relative;font-size:9px;color:var(--text-dim);display:flex;align-items:flex-start;justify-content:flex-start;padding:1px}
.snl-n{position:absolute;top:1px;left:2px}
.snl-m{position:absolute;bottom:1px;right:1px;font-size:13px}
.snl-tok{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:15px}
/* wordle */
.wordle-grid{display:flex;flex-direction:column;gap:5px}
.wordle-row{display:flex;gap:5px}
.wordle-tile{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;border-radius:5px;color:#fff;background:var(--elev);text-transform:uppercase}
.wordle-tile.empty{background:transparent;box-shadow:inset 0 0 0 2px var(--border)}
.wordle-tile.m0{background:#3a3d42}
.wordle-tile.m1{background:#c9b458}
.wordle-tile.m2{background:#2f7d4e}
/* mastermind */
.mm-row{display:flex;align-items:center;gap:6px;margin:3px 0}
.mm-row.cur{margin-top:10px}
.mm-peg{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.mm-peg.empty{background:var(--elev);box-shadow:inset 0 0 0 2px var(--border)}
.mm-fb{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-left:8px}
.mm-fp{width:9px;height:9px;border-radius:50%}
.mm-fp.black{background:#111;box-shadow:0 0 0 1px #555}
.mm-fp.white{background:#fff;box-shadow:0 0 0 1px #999}
.mm-palette{display:flex;gap:8px;margin:10px 0}
.mm-swatch{width:32px;height:32px;border-radius:50%;cursor:pointer;box-shadow:inset 0 2px 4px rgba(0,0,0,.3)}
.mm-swatch:hover{transform:scale(1.1)}
/* dots & boxes */
.dots-grid{display:grid;justify-content:center;align-items:center;gap:0}
.dots-grid .dot{width:10px;height:10px;background:var(--text-dim);border-radius:50%}
.dots-grid .edge.h{width:34px;height:6px;border-radius:3px;background:var(--elev);cursor:pointer}
.dots-grid .edge.v{width:6px;height:34px;border-radius:3px;background:var(--elev);cursor:pointer}
.dots-grid .edge:hover{background:var(--title)}
.dots-grid .edge.on{background:var(--text);cursor:default}
.dots-grid .boxc{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px}
/* mancala */
.mnc{display:flex;align-items:center;gap:8px;background:var(--card);padding:12px;border-radius:14px}
.mnc-store{width:44px;height:150px;background:var(--elev);border-radius:22px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:var(--text)}
.mnc-mid{display:flex;flex-direction:column;gap:10px}
.mnc-row{display:flex;gap:10px}
.mnc-pit{width:46px;height:46px;border-radius:50%;background:var(--elev);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text)}
.mnc-pit.own{box-shadow:inset 0 0 0 2px var(--success);cursor:pointer}
.mnc-pit.own:hover{background:var(--hover)}
.mnc-pit.last{outline:2px solid var(--star)}
/* battleship */
.bs-wrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.bs-side{text-align:center}
.bs-label{font-size:12px;color:var(--text-dim);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}
.bs-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;width:min(44vw,240px)}
.bs-cell{aspect-ratio:1;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:min(2.6vw,13px);background:#1c3a52}
.bs-cell.sea{background:#1c3a52}
.bs-cell.sea:hover{background:#2a557a;cursor:crosshair}
.bs-cell.hit{background:#a83232}.bs-cell.miss{background:#2a3a48;color:#8fb3cc}
.bs-cell.ship{background:#556}.bs-cell.myship{background:#5a6b76}
.bs-cell.hitme{background:#a83232}.bs-cell.missme{background:#2a3a48;color:#8fb3cc}
.bs-cell.last{outline:2px solid var(--star)}
/* liar's dice */
.liar-die{font-size:30px;color:var(--text)}
.liar-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
/* dominoes */
.dom-line{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin:6px 0;max-width:520px}
.dom-hand{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.dom-tile{display:flex;background:#f4f1e8;border-radius:5px;overflow:hidden;border:1px solid #0004}
.dom-half{width:24px;height:36px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#222;border-right:1px solid #0003;font-size:15px}
.dom-half:last-child{border-right:0}
.dom-tile.play{cursor:pointer}.dom-tile.play:hover{outline:2px solid var(--title)}
.dom-tile.dim{opacity:.4}
/* playing cards (crazy eights) */
.pcard{width:44px;height:62px;background:#fff;border-radius:6px;border:1px solid #0003;display:flex;flex-direction:column;justify-content:space-between;padding:4px 6px;font-weight:800;color:#111}
.pcard.red{color:#c0392b}.pcard.blk{color:#111}
.pcard.big{width:56px;height:80px;font-size:18px}
.pcard.play{cursor:pointer}.pcard.play:hover{transform:translateY(-4px);box-shadow:0 6px 14px #0006}
.pcard.dim{opacity:.4}
.c8-top{display:flex;flex-direction:column;align-items:center;gap:4px;margin:6px 0}
.c8-hand{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.suit-pick{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 22px;text-align:center}
.suit-title{color:var(--text);font-weight:700;margin-bottom:12px}
.suit-row{display:flex;gap:10px}
.suit-btn{width:52px;height:52px;font-size:26px;border-radius:10px;border:1px solid var(--border);background:#fff;color:#111;cursor:pointer}
.suit-btn.red{color:#c0392b}
/* message delete affordance */
.msg{position:relative}
.msg-del{position:absolute;top:8px;right:8px;color:var(--text-dim);opacity:0;cursor:pointer;font-size:12px;transition:opacity .12s}
.msg:hover .msg-del{opacity:.7}
.msg-del:hover{opacity:1;color:var(--danger)}
/* message hover actions (react/edit/delete) */
.msg-acts{position:absolute;top:6px;right:8px;display:flex;gap:10px;opacity:0;transition:opacity .12s;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:4px 8px}
.msg:hover .msg-acts{opacity:.95}
.msg-acts i{color:var(--text-dim);cursor:pointer;font-size:13px}
.msg-acts i:hover{color:var(--text)}.msg-acts i.danger:hover{color:var(--danger)}
.edited-tag{color:var(--text-dim);font-size:11px}
.edit-in{width:100%;background:var(--search);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:6px 8px;margin-top:2px}
/* reactions */
.reactions{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.reactions:empty{display:none}
.rx-chip{background:var(--elev);border:1px solid var(--border);border-radius:12px;padding:1px 8px;font-size:12px;color:var(--text);cursor:pointer}
.rx-chip:hover{border-color:var(--title)}
.rx-pop{position:fixed;z-index:1300;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px;display:flex;gap:4px;box-shadow:0 8px 24px #0007}
.rx-opt{background:transparent;border:0;font-size:20px;cursor:pointer;border-radius:6px;padding:2px 4px}
.rx-opt:hover{background:var(--hover)}
/* typing + mention */
#typing-bar{padding:2px 16px;color:var(--text-dim);font-size:12px;font-style:italic;min-height:16px}
.mention-pop{position:fixed;z-index:1300;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 8px 24px #0007;min-width:160px}
.mention-item{padding:7px 12px;cursor:pointer;color:var(--text);font-size:14px}
.mention-item:hover,.mention-item.sel{background:var(--hover)}

/* ============ MOBILE / RESPONSIVE ============ */
.mobile-only{display:none}
.hamburger{background:transparent;border:0;color:rgba(255,255,255,.9);font-size:20px;cursor:pointer;padding:4px 8px}
@media (max-width: 860px){
  .mobile-only{display:inline-flex;align-items:center}
  .chat-nav{gap:22px;font-size:18px}
  .navbar-inner{gap:8px;padding:0 10px}
  .logo{font-size:18px}
  .user-pill .name{display:none}
  .btn-pill{padding:5px 10px}
  /* left + right become off-canvas drawers */
  .left,.right{position:fixed;top:50px;bottom:0;z-index:60;transition:transform .22s ease;box-shadow:0 0 40px #0008}
  .left{left:0;width:80vw;max-width:300px;transform:translateX(-102%)}
  .right{right:0;width:80vw;max-width:300px;transform:translateX(102%);border-left:0}
  body.nav-open .left{transform:translateX(0)}
  body.people-open .right{transform:translateX(0)}
  .center{width:100%}
  /* backdrop when a drawer is open */
  body.nav-open::after,body.people-open::after{content:"";position:fixed;inset:50px 0 0 0;background:#0007;z-index:55}
  /* tighter chat spacing */
  .messages{padding:8px 10px}
  .msg{gap:8px}
  .msg .m-av{width:32px;height:32px;flex:0 0 32px}
  .cam-tile{width:46vw;height:34vw}
  .composer{padding:8px 10px;gap:6px}
  .composer-tools{gap:11px;font-size:15px}
  /* modals + dropdowns fit the screen */
  .modal,.profile-card,.suit-pick{width:94vw!important;max-width:94vw}
  .dropdown{width:min(92vw,280px)}
  #game-surface{overflow-x:auto}
  .right-tabs{justify-content:center}
}
@media (max-width: 480px){
  .chat-nav{gap:16px}
  .tab-header .description{display:none}
  .cam-tile{width:100%;height:52vw}
}

/* ===== YOUR OWN cam docks top-left, above the user list (EpikChat-style); others stay in the center dock ===== */
.cam-self{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;padding:8px 8px 4px;max-height:44vh;overflow-y:auto;background:var(--panel)}
.cam-self:empty{display:none}
.cam-self .cam-tile{width:100%;height:auto;aspect-ratio:4/3}
.left .list-section{flex:1 1 auto;min-height:0}

/* ===== friends list + add-friend + gallery (right panel) ===== */
.rsec-h.friends-head,.rsec-h.gal-head{display:flex;align-items:center;justify-content:space-between}
.friends-add,.gal-new{cursor:pointer;color:var(--title);font-weight:700;font-size:11px;letter-spacing:.02em}
.friends-add:hover,.gal-new:hover{filter:brightness(1.15)}
.r-item.friend .r-ava{position:relative}
.r-item.friend .r-ava .pres{position:absolute;bottom:0;right:0;width:9px;height:9px;border-radius:50%;background:#61c13e;border:2px solid var(--panel)}
.r-item.friend.off{opacity:.55}
.r-item.friend.off:hover{opacity:.85}
.r-cam{color:#61c13e;font-size:13px;padding:2px 4px;border-radius:5px;background:rgba(97,193,62,.14);cursor:pointer;flex:0 0 auto}
.r-cam:hover{background:rgba(97,193,62,.28)}
/* gallery grids */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gal-fig{display:flex;flex-direction:column;gap:3px;min-width:0}
.gal-by{font-size:10px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;max-width:100%}
.gal-thumb{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;background:var(--elev);cursor:pointer;border:1px solid var(--border)}
.gal-thumb:hover{outline:2px solid var(--title);outline-offset:-1px}
.gal-viewall{margin-top:8px;text-align:center;color:var(--title);font-weight:700;font-size:12px;cursor:pointer}
.gal-viewall:hover{filter:brightness(1.15)}
/* shared overlay for add-friend / gallery-all / cam-approval */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:60}
.addf-card,.galall-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;width:min(420px,92vw);max-height:82vh;display:flex;flex-direction:column;gap:10px;box-shadow:0 16px 50px rgba(0,0,0,.5)}
.galall-card{width:min(680px,94vw)}
.addf-title{font-weight:800;font-size:15px;color:var(--text)}
.addf-input{width:100%;background:var(--search);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:8px 10px;outline:none}
.addf-list{overflow-y:auto;display:flex;flex-direction:column;gap:2px;min-height:60px}
.addf-row{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:6px}
.addf-row:hover{background:var(--elev)}
.addf-add{margin-left:auto;background:var(--title);border:0;color:#fff;font-weight:700;font-size:12px;padding:5px 12px;border-radius:6px;cursor:pointer}
.addf-add:hover{filter:brightness(1.1)}
.addf-foot{display:flex;justify-content:flex-end;gap:8px}
.galall-grid{overflow-y:auto;grid-template-columns:repeat(4,1fr)}

/* ===== Skribbl (draw & guess) ===== */
.sk-root{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--panel)}
.sk-top{display:flex;align-items:center;gap:14px;padding:8px 12px;border-bottom:1px solid var(--line);flex:0 0 auto}
.sk-round{font-weight:700;color:var(--text-dim);font-size:13px;white-space:nowrap}
.sk-word{flex:1;text-align:center;font-weight:800;letter-spacing:4px;font-size:20px;color:var(--title);font-family:monospace}
.sk-timewrap{display:flex;align-items:center;gap:8px;min-width:120px}
.sk-timebar-bg{width:80px;height:8px;background:var(--sunken);border-radius:4px;overflow:hidden}
.sk-timebar{height:100%;width:100%;background:var(--success);transition:width 1s linear}
.sk-leave{background:var(--danger);border:0;color:#fff;font-weight:700;padding:5px 12px;border-radius:6px;cursor:pointer}
.sk-main{flex:1;display:flex;min-height:0}
.sk-left{flex:1;display:flex;flex-direction:column;min-width:0;padding:10px;gap:8px;position:relative}
#sk-canvas{flex:1;width:100%;min-height:0;background:#fff;border-radius:8px;border:1px solid var(--border);cursor:not-allowed;object-fit:contain}
#sk-canvas.sk-candraw{cursor:crosshair}
.sk-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:0 0 auto}
.sk-tools .dt-swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.sk-tools .dt-swatch.sel{border-color:var(--title)}
.sk-size{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;background:var(--elev)}
.sk-size.sel{outline:2px solid var(--title)}
.sk-dot{background:var(--text);border-radius:50%;display:block}
.sk-eraser,.sk-clearbtn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;background:var(--elev);color:var(--text)}
.sk-eraser.on{background:var(--title);color:#fff}
.sk-right{width:240px;flex:0 0 240px;display:flex;flex-direction:column;border-left:1px solid var(--line);min-height:0}
.sk-scores{flex:0 0 auto;max-height:40%;overflow-y:auto;padding:8px}
.sk-score{display:flex;justify-content:space-between;padding:4px 8px;border-radius:6px;font-size:13px}
.sk-score.drawing{background:rgba(48,151,209,.14);font-weight:700}
.sk-score.guessed{color:var(--success)}
.sk-spts{font-weight:700}
.sk-guesses{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:3px;min-height:0;border-top:1px solid var(--line)}
.sk-gline{font-size:13px;color:var(--text);word-break:break-word}
.sk-gline.ok{color:var(--success);font-weight:700}
.sk-gline.close{color:var(--star);font-style:italic}
.sk-gline.reveal{color:var(--title);font-weight:700}
.sk-guess-input{border:0;border-top:1px solid var(--line);background:var(--search);color:var(--text);padding:10px;outline:none;flex:0 0 auto}
.sk-guess-input:disabled{opacity:.6}
.sk-overlay{position:absolute;inset:10px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);border-radius:8px;backdrop-filter:blur(3px)}
.sk-ovcard{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px 26px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;max-width:90%}
.sk-ovh{font-weight:800;font-size:18px;color:var(--text)}
.sk-ovsub,.sk-ovwait{color:var(--text-dim);font-size:13px}
.sk-choices{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sk-opt{background:var(--elev);border:1px solid var(--border);color:var(--text);font-weight:700;padding:8px 16px;border-radius:8px;cursor:pointer}
.sk-opt.on,.sk-opt:hover{background:var(--title);color:#fff;border-color:var(--title)}
.sk-setrow{color:var(--text-dim);font-size:13px;margin-top:4px}
.sk-end{margin:auto;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:22px 28px;text-align:center;display:flex;flex-direction:column;gap:12px;min-width:280px}
.sk-endboard{display:flex;flex-direction:column;gap:4px}
.sk-erow{display:flex;justify-content:space-between;padding:6px 10px;border-radius:6px;background:var(--elev)}
.sk-erow.win{background:rgba(97,193,62,.18);font-weight:800}

/* ===== chat color picker: name + text, solid or gradient ===== */
.cp-sec{margin-bottom:10px}
.cp-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:0 2px 6px;font-weight:700}
.cp-sec .color-grid{grid-template-columns:repeat(6,1fr);margin-bottom:6px}
.cp-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cp-grad{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-dim);cursor:pointer}
.cp-c2{margin-top:6px}
.color-preview{margin:6px 0 10px;padding:8px 10px;background:var(--sunken);border-radius:8px;font-weight:700}
.cp-foot{display:flex;gap:8px;justify-content:space-between}
.cp-foot .gs-btn{padding:6px 14px;font-size:13px}
/* gradient text: keep the "(edited)" tag and links legible */
.grad-text .edited-tag{-webkit-text-fill-color:var(--muted);color:var(--muted)}
.grad-text a{-webkit-text-fill-color:var(--title);color:var(--title)}

/* ===== per-user sex + country flag ===== */
.u-male{color:#4aa3ff}
.u-fem{color:#ff6fae}
.u-other{color:#b58edc}
.u-flag{font-size:13px;line-height:1;vertical-align:middle}
.u-sub .u-male,.u-sub .u-fem,.u-sub .u-other{font-size:12px}
.pf-name .u-male,.pf-name .u-fem,.pf-name .u-other{font-size:15px;margin:0 2px}
.pf-sex-row{display:flex;gap:8px}
.pf-sex{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:1px solid var(--border);background:var(--elev);color:var(--text-dim);border-radius:8px;cursor:pointer;font-weight:700}
.pf-sex.on[data-sex="M"]{background:#4aa3ff;color:#fff;border-color:#4aa3ff}
.pf-sex.on[data-sex="F"]{background:#ff6fae;color:#fff;border-color:#ff6fae}
.pf-sex.on[data-sex="O"]{background:#b58edc;color:#fff;border-color:#b58edc}

/* ===== lobby votekick banner ===== */
.vk-banner{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--danger);color:#fff;font-size:13px;flex:0 0 auto;z-index:8}
.vk-banner .vk-txt{flex:1}
.vk-count{font-weight:800;background:rgba(0,0,0,.25);padding:2px 8px;border-radius:10px}
.vk-yes{background:#fff;color:var(--danger);border:0;font-weight:800;padding:5px 14px;border-radius:6px;cursor:pointer}
.vk-yes:disabled{opacity:.7;cursor:default}
.vk-target{font-weight:700;font-style:italic}
.vk-x{cursor:pointer;opacity:.85}
.vk-x:hover{opacity:1}

/* ===== Live Caption panel ===== */
.live-caption{position:fixed;left:16px;bottom:90px;width:440px;max-width:92vw;max-height:52vh;z-index:1400;background:#15171c;color:#e7e9ec;border:1px solid #2a2f37;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden}
.live-caption[hidden]{display:none}
.live-caption.mini .lc-body{display:none}
.lc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:8px 12px;background:#0f1115;border-bottom:1px solid #2a2f37;cursor:grab}
.lc-head:active{cursor:grabbing}
.lc-title{font-weight:800;font-size:13px;color:#fff}
.lc-title i{color:#61c13e;margin-right:5px}
.lc-sub{font-size:12px;color:#8b93a1;margin-left:6px}
.lc-feeds{font-size:12px;color:#c9cdd3;margin-top:2px}
.lc-btns{display:flex;gap:10px;color:#8b93a1;flex:0 0 auto}
.lc-btns i{cursor:pointer}.lc-btns i:hover{color:#fff}
.lc-body{flex:1;overflow-y:auto;padding:8px 12px;font-size:14px;line-height:1.5}
.lc-line{margin:2px 0;word-break:break-word}
.lc-line[data-interim="1"]{opacity:.7}
.lc-sp{font-weight:700}
.lc-txt{color:#e7e9ec}
.lc-lang{color:#6b727c;font-size:12px}
.lc-trans{margin:1px 0 4px 14px;color:#9ecbff;font-size:13px}
.lc-arrow{color:#6b7d95;font-weight:700}

/* ===== Compact messages (one-line: time · dot+name · text) ===== */
body.compact .msg{padding:2px 12px;gap:8px;align-items:baseline}
body.compact .msg:hover{background:var(--hover)}
body.compact .m-av{display:none}
body.compact .m-body{display:flex;flex-flow:row wrap;align-items:baseline;gap:6px}
body.compact .m-head{display:inline-flex;align-items:baseline;gap:6px;margin:0;flex:0 0 auto}
body.compact .m-head .time-stamp{order:-1;min-width:58px;font-size:11px}
body.compact .user-name::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);margin-right:6px;vertical-align:middle}
body.compact .message-text{display:inline;margin:0;line-height:1.5}
body.compact .reactions{flex:1 1 100%;margin:2px 0 0}
body.compact .message-media-wrap{flex:1 1 100%}
body.compact .message-media{max-height:160px;width:auto}
body.compact .edited-tag{font-size:11px}
.lc-status{color:#8b93a1;font-size:13px;padding:10px 4px;font-style:italic;line-height:1.5}

/* ===== cam tile sizes (S / M / L) — a middle ground between grid-small and fullscreen ===== */
.cam-dock.cam-sm .cam-tile{width:150px;height:112px}
.cam-dock.cam-md .cam-tile{width:220px;height:165px}
.cam-dock.cam-lg .cam-tile{width:320px;height:240px}
.cam-dock.stacked.cam-sm .cam-tile{width:240px;height:180px}
.cam-dock.stacked.cam-md .cam-tile{width:340px;height:255px}
.cam-dock.stacked.cam-lg .cam-tile{width:480px;height:360px}
.cam-size-ctrl{cursor:pointer;font-weight:800;font-size:12px;min-width:16px;text-align:center;color:var(--text-dim);border:1px solid var(--border);border-radius:4px;padding:0 4px}
.cam-size-ctrl:hover{color:var(--text);background:var(--hover)}

/* ===== message char counter (300 cap) ===== */
.char-count{flex:0 0 auto;align-self:center;font-size:11px;color:var(--text-dim);min-width:26px;text-align:right;font-variant-numeric:tabular-nums}
.char-count.over{color:var(--danger);font-weight:700}

/* ===== cam "USER DISCONNECTED" grace-period overlay ===== */
.cam-interrupt{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,.72);backdrop-filter:blur(2px);text-align:center;padding:8px}
.cam-interrupt .ci-title{color:#ff5555;font-weight:800;font-size:13px;letter-spacing:.03em}
.cam-interrupt .ci-title i{margin-right:5px}
.cam-interrupt .ci-sub{color:#e7e9ec;font-size:12px}
.cam-interrupt .ci-n{color:#e0a33e;font-size:15px;font-variant-numeric:tabular-nums}

/* ===== Watch Party bar controls (volume + input lock) ===== */
.wp-bar{gap:12px}
.wp-role{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-vol{display:flex;align-items:center;gap:7px;color:#fff;flex:0 0 auto}
.wp-vol i{width:16px;text-align:center}
.wp-vol input[type=range]{width:90px;accent-color:var(--title);cursor:pointer}
.wp-lock{background:rgba(255,255,255,.14);border:0;color:#fff;font-weight:600;font-size:12px;padding:5px 11px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;flex:0 0 auto}
.wp-lock:hover{background:rgba(255,255,255,.24)}
.wp-lock.on{background:var(--danger)}

/* ===== "X is live" toast ===== */
.toast.toast-live{cursor:pointer;border-left:3px solid var(--danger)}
.toast.toast-live:hover{background:var(--elev)}

/* ===== Cam Spots (shared slot grid) ===== */
body.spots-mode #cam-dock,body.spots-mode #cam-self{display:none}
#cam-spots{display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--panel);overflow:auto;flex:0 1 auto;max-height:62vh}
.cam-spots-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:8px}
.spot{position:relative;aspect-ratio:4/3;background:var(--sunken);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* Stage mode = a performance: few BIG featured cams + an audience banner */
body.stage-mode #cam-spots{max-height:70vh}
body.stage-mode .spot{aspect-ratio:16/10}
.stage-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;background:linear-gradient(90deg,var(--header),transparent);border-radius:8px;color:#fff;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;letter-spacing:.05em}
.stage-aud{color:rgba(255,255,255,.8);font-weight:500}
.livedot-css{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff425f;margin-right:6px;vertical-align:middle;animation:lc-pulse 2s infinite}
@keyframes lc-pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.livedot-css{animation:none}}
.spot.empty{border-style:dashed}
.spot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
.spot-take{background:var(--title);color:#fff;border:0;border-radius:8px;padding:9px 14px;font-weight:700;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:7px}
.spot-take:hover{filter:brightness(1.1)}
.spot-open{color:var(--faint,var(--text-dim));font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.5}
.spot-wait{position:absolute;color:#fff;font-size:12px;background:#0007;padding:3px 8px;border-radius:5px;z-index:2}
.spot-name{position:absolute;left:0;bottom:0;z-index:3;padding:4px 8px;font-size:12px;font-weight:600;color:#fff;width:100%;background:linear-gradient(transparent,#000b)}
.spot-x{position:absolute;top:5px;right:6px;z-index:4;color:#fff;background:#0008;border-radius:4px;padding:1px 6px;cursor:pointer;font-size:12px}
.spot-x:hover{background:var(--danger)}

/* ===== create-room layout picker ===== */
.cr-layout{margin:10px 0}
.cr-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:8px}
.cr-modes{display:flex;flex-direction:column;gap:7px}
.cr-mode{text-align:left;background:var(--elev);border:1px solid var(--border);border-radius:9px;padding:10px 12px;cursor:pointer;color:var(--text);display:flex;flex-direction:column;gap:2px}
.cr-mode b{font-size:14px}
.cr-mode span{font-size:12px;color:var(--text-dim)}
.cr-mode.on{border-color:var(--title);background:var(--accent-soft,var(--elev));box-shadow:inset 0 0 0 1px var(--title)}
.cr-spotcfg{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap}
.cr-inline{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-dim)}
.cr-inline select{background:var(--search);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:5px 8px}

/* ===== Yahtzee ===== */
.yz-dice{display:flex;gap:8px;justify-content:center;margin:8px 0}
.yz-die{width:52px;height:52px;font-size:34px;line-height:1;background:var(--elev);border:2px solid var(--border);border-radius:10px;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center}
.yz-die.held{border-color:var(--title);background:var(--accent-soft,var(--elev));box-shadow:inset 0 0 0 1px var(--title)}
.yz-die:disabled{cursor:default;opacity:.7}
.yz-card{display:flex;flex-direction:column;gap:2px;max-width:340px;margin:10px auto 0}
.yz-row{display:grid;grid-template-columns:1fr 54px 54px;align-items:center;gap:2px;font-size:13px}
.yz-cat{color:var(--text-dim);padding:3px 6px}
.yz-cell{text-align:center;padding:3px 0;border-radius:5px;background:var(--sunken);font-variant-numeric:tabular-nums}
.yz-cell.mine{background:var(--elev)}
.yz-cell.preview{color:var(--title);cursor:pointer;font-weight:700}
.yz-cell.preview:hover{background:var(--title);color:#fff}
.yz-total{margin-top:4px;font-weight:800;border-top:1px solid var(--line)}
.yz-total .yz-cell{background:transparent}
.yz-names{text-align:center;font-size:12px;color:var(--text-dim);margin-top:8px}

/* ===== Two Truths & a Lie ===== */
.tt-form{display:flex;flex-direction:column;gap:8px;max-width:420px;margin:8px auto}
.tt-row{display:flex;align-items:center;gap:10px}
.tt-in{flex:1;background:var(--search);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:8px 10px;outline:none}
.tt-vote{display:flex;flex-direction:column;gap:8px;max-width:440px;margin:8px auto}
.tt-opt{text-align:left;padding:11px 14px;border-radius:9px;border:1px solid var(--border);background:var(--elev);color:var(--text);cursor:pointer;font-size:14px}
.tt-opt:hover:not(:disabled){border-color:var(--title);background:var(--accent-soft,var(--elev))}
.tt-opt.lie{border-color:var(--danger);background:var(--live-soft,rgba(204,65,37,.12));color:var(--danger);font-weight:600}
.tt-opt.truth{border-color:var(--success);opacity:.85}
.gs-scores{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:10px}
.gs-score-chip{font-size:12px;background:var(--elev);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-weight:600}

/* ===== Go Fish ===== */
.gf-meta{text-align:center;font-size:12px;color:var(--text-dim);margin:6px 0}
.gf-hand{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.gf-card{min-width:44px;height:60px;background:var(--panel);border:1px solid var(--line2,var(--border));border-radius:7px;font-size:18px;font-weight:700;color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gf-card small{font-size:10px;color:var(--text-dim);font-weight:500}
.gf-card:hover:not(:disabled){border-color:var(--title);background:var(--accent-soft,var(--elev))}
.gf-card:disabled{opacity:.6;cursor:default}

/* ===== Chess ===== */
.chess-board{display:grid;grid-template-columns:repeat(8,1fr);width:min(440px,86vw);aspect-ratio:1;margin:10px auto;border:3px solid #2b2016;border-radius:6px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.chsq{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}
.chsq.l{background:#eadfc4}.chsq.d{background:#9a7250}
.chsq.last{box-shadow:inset 0 0 0 100px rgba(240,214,80,.28)}
.chsq.sel{box-shadow:inset 0 0 0 3px #f5c542}
.chsq.check{background:#e05a4e}
.chsq.mv::after{content:"";width:28%;height:28%;border-radius:50%;background:rgba(40,120,40,.5)}
.chsq.cap{box-shadow:inset 0 0 0 4px rgba(200,60,40,.65)}
.chp{font-size:min(8vw,40px);line-height:1;pointer-events:none}
.chp.chw{color:#fff;text-shadow:0 0 1px #000,0 1px 2px rgba(0,0,0,.6),0 0 3px #000}
.chp.chb{color:#1b1b1b;text-shadow:0 1px 1px rgba(255,255,255,.35)}

/* ===== Uno (colored cards + deal/play animation) ===== */
.uno-opps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:10px}
.uno-opp{font-size:12px;background:var(--elev);border:1px solid var(--border);border-radius:999px;padding:3px 10px}
.uno-opp.on{background:var(--title);color:#fff;border-color:transparent}
.uno-opp b{font-variant-numeric:tabular-nums}
.uno-mid{display:flex;align-items:center;justify-content:center;gap:16px;margin:6px 0}
.uno-color{font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:6px}
.uc-dot{width:14px;height:14px;border-radius:50%;display:inline-block}
.uno-card{min-width:46px;height:66px;border-radius:9px;border:3px solid #fff;color:#fff;font-weight:800;font-size:18px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:default}
.uno-card.big{width:60px;height:86px;font-size:24px;cursor:default}
.uc-r,.uc-dot.uc-r{background:#d9202a}.uc-y,.uc-dot.uc-y{background:#e5b80b}.uc-g,.uc-dot.uc-g{background:#2c9e3f}.uc-b,.uc-dot.uc-b{background:#1f6fd0}
.uc-w,.uc-dot.uc-w{background:conic-gradient(#d9202a,#e5b80b,#2c9e3f,#1f6fd0,#d9202a);color:#fff}
.uno-hand{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:12px;perspective:600px}
.uno-hand .uno-card{cursor:not-allowed;opacity:.6;transform:translateY(0);transition:transform .12s,opacity .12s,box-shadow .12s;animation:uno-deal .3s ease both}
.uno-hand .uno-card.playable{cursor:pointer;opacity:1}
.uno-hand .uno-card.playable:hover{transform:translateY(-10px);box-shadow:0 8px 18px rgba(0,0,0,.4)}
@keyframes uno-deal{from{transform:translateY(26px) rotateX(40deg);opacity:0}to{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.uno-hand .uno-card{animation:none}}

/* ===== card animations + board aesthetics (global polish pass) ===== */
@keyframes card-deal{from{transform:translateY(16px) scale(.92);opacity:0}to{transform:none;opacity:1}}
@keyframes piece-drop{from{transform:translateY(-16px);opacity:.2}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .bj-card,.gf-card,.dom-tile,.c8-card{animation:card-deal .26s cubic-bezier(.2,.7,.3,1) both}
  .ck-pc,.rv-pc{animation:piece-drop .22s ease both}
}
/* real playing-card look for blackjack */
.bj-card{padding:5px 8px;min-width:24px;height:36px;font-size:15px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.15);vertical-align:middle;background:#fbfbf7}
/* checkers: proper wooden board + glossy discs */
.gs-checkers{border:3px solid #2b2016;border-radius:6px;box-shadow:0 8px 26px rgba(0,0,0,.3)}
.gs-checkers .gs-cell.ck.dark{background:#9a7250}
.gs-checkers .gs-cell.ck.lite{background:#eadfc4}
.gs-checkers .gs-cell.ck.sel{box-shadow:inset 0 0 0 3px #f5c542}
.gs-checkers .gs-cell.ck.last{box-shadow:inset 0 0 0 100px rgba(240,214,80,.22)}
.ck-pc{width:74%;height:74%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 2px 4px rgba(0,0,0,.45),inset 0 2px 3px rgba(255,255,255,.35)}
.ck-pc.p0{background:radial-gradient(circle at 40% 35%,#f4f4f4,#c8ccd2);color:#8a6d16}
.ck-pc.p1{background:radial-gradient(circle at 40% 35%,#e0555a,#a11d22);color:#ffe9a8}
.ck-pc.king{outline:2px solid #f5c542;outline-offset:-4px}
/* connect-four / gomoku discs pop in */
@media (prefers-reduced-motion:no-preference){ .gs-cell.last{animation:piece-drop .24s ease} }
/* generic card entrance for the war/pot cards */
.gs-card{animation:card-deal .26s ease both}

/* ===== Backgammon ===== */
.bg-board{background:#3a2a1c;border:6px solid #241811;border-radius:8px;padding:5px;max-width:520px;margin:8px auto;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.bg-row{display:flex;height:128px}
.bg-pt{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.bg-pt.top{justify-content:flex-start}.bg-pt.bot{justify-content:flex-end}
.bg-pt::before{content:"";position:absolute;left:8%;width:84%;height:96%;z-index:0}
.bg-pt.top::before{top:0;clip-path:polygon(0 0,100% 0,50% 100%)}
.bg-pt.bot::before{bottom:0;clip-path:polygon(50% 0,0 100%,100% 100%)}
.bg-pt.bg-a::before{background:#caa06a}.bg-pt.bg-b::before{background:#7a5230}
.bg-pt.movable{cursor:pointer}.bg-pt.movable::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px rgba(245,197,66,.55);border-radius:4px;z-index:2}
.bg-pt.sel::before{filter:brightness(1.45)}
.bg-pt.target{cursor:pointer}.bg-pt.target::after{content:"";position:absolute;left:20%;right:20%;top:35%;height:20px;border:2px dashed #f5c542;border-radius:50%;z-index:3}
.bg-stack{position:relative;z-index:1;display:flex;flex-direction:column;gap:1px;align-items:center}
.bg-pt.bot .bg-stack{flex-direction:column-reverse}
.bg-ch{width:19px;height:19px;border-radius:50%;box-shadow:0 1px 2px #0008,inset 0 1px 2px rgba(255,255,255,.45)}
.bg-p0{background:radial-gradient(circle at 38% 32%,#fbfbfb,#c6cad0)}
.bg-p1{background:radial-gradient(circle at 38% 32%,#4a4a4a,#0e0e0e)}
.bg-more{font-size:10px;color:#fff;font-weight:800;z-index:2}
.bg-bar{width:24px;background:#241811;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:2px 0}
.bg-barstack{display:flex;flex-direction:column;gap:1px;min-height:10px}
.bg-barstack.movable{outline:2px solid #f5c542;border-radius:6px;cursor:pointer}
.bg-dice{display:flex;gap:10px;justify-content:center;align-items:center;font-size:28px;margin:6px;color:var(--text)}
.bg-die.used{opacity:.28}
.bg-rem{font-size:12px;color:var(--text-dim);font-family:"IBM Plex Mono",monospace}
.bg-off{text-align:center;margin:6px auto;font-size:13px;color:var(--text-dim)}
.bg-off b{color:var(--text);font-variant-numeric:tabular-nums}
.bg-off.target{outline:2px dashed #f5c542;border-radius:6px;padding:5px;cursor:pointer;display:inline-block}
.bg-p0-t{color:#e8e8e8}.bg-p1-t{color:#8a8a8a}

/* ===== playing cards (Hearts/Spades) ===== */
.pcard{width:44px;height:62px;background:#fdfdfa;border:1px solid #cfd2d6;border-radius:7px;box-shadow:0 2px 5px rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;line-height:1;position:relative;animation:card-deal .24s ease both}
.pcard.red{color:#c62828}.pcard.blk{color:#1a1a1a}
.pcard .pc-r{font-size:17px}.pcard .pc-s{font-size:19px}
.pcard.dim{opacity:.5}
.pcard.play{cursor:pointer;transition:transform .1s,box-shadow .1s}
.pcard.play:hover{transform:translateY(-9px);box-shadow:0 9px 18px rgba(0,0,0,.35)}
.ht-trick{display:flex;gap:10px;justify-content:center;min-height:74px;align-items:center;margin:10px 0;padding:8px;background:var(--sunken);border-radius:10px}
.ht-play{display:flex;flex-direction:column;align-items:center;gap:3px}
.ht-who{font-size:11px;color:var(--text-dim)}
.ht-hand{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:10px;perspective:700px}

/* ===== Spades (bidding) ===== */
.sp-bids{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.sp-bid{width:34px;height:34px;border-radius:7px;border:1px solid var(--border);background:var(--elev);color:var(--text);font-weight:700;cursor:pointer}
.sp-bid:hover{background:var(--title);color:#fff;border-color:transparent}
.gs-score-chip.sp-t0{border-left:3px solid #4aa3ff}
.gs-score-chip.sp-t1{border-left:3px solid #ff6fae}

/* ===== Poker table ===== */
.pk-players{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:10px}
.pk-seat{background:var(--elev);border:1px solid var(--border);border-radius:9px;padding:7px 11px;font-size:12px;min-width:92px;text-align:center}
.pk-seat.act{border-color:var(--title);box-shadow:0 0 0 2px var(--title)}
.pk-seat.folded{opacity:.45}
.pk-seat.won{border-color:var(--success);box-shadow:0 0 0 2px var(--success)}
.pk-nm{font-weight:700}
.pk-stack{color:var(--text-dim);font-variant-numeric:tabular-nums}
.pk-bet{color:var(--gold,#e0a33e)}
.pk-holes{display:flex;gap:3px;justify-content:center;margin-top:4px}
.pk-holes .pcard{width:26px;height:36px}.pk-holes .pc-r{font-size:11px}.pk-holes .pc-s{font-size:12px}
.pk-comm{display:flex;gap:6px;justify-content:center;padding:12px;background:radial-gradient(ellipse at center,#1c5b39,#123a25);border-radius:14px;margin:8px auto;max-width:340px;box-shadow:inset 0 0 20px rgba(0,0,0,.4)}
.pcard.back{background:repeating-linear-gradient(45deg,#3a4a7a,#3a4a7a 5px,#2c3860 5px,#2c3860 10px);border-color:#22284a}
.pk-pot{text-align:center;font-family:"IBM Plex Mono",monospace;font-weight:700;color:var(--gold,#e0a33e);letter-spacing:.05em;margin:6px}
.pk-myhole{display:flex;gap:6px;justify-content:center;margin:8px}
.pk-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px;align-items:center}
.pk-raise{width:80px;background:var(--search);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:7px 8px;text-align:center}

/* ===== Euchre ===== */
.eu-trump{text-align:center;font-size:13px;color:var(--text-dim);margin-bottom:8px}
.eu-trump .red{color:#c62828;font-size:16px}.eu-trump .blk{color:var(--text);font-size:16px}
.eu-up{display:flex;align-items:center;gap:8px;justify-content:center;margin:8px 0}
.gs-btn.eu-red{color:#c62828;font-size:18px}.gs-btn.eu-blk{font-size:18px}

/* ===== Cribbage ===== */
.cb-scores{display:flex;flex-direction:column;gap:5px;max-width:360px;margin:0 auto 10px}
.cb-srow{display:flex;align-items:center;gap:8px;font-size:13px}
.cb-srow.me{font-weight:700}
.cb-srow span:first-child{width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-pegwrap{flex:1;height:8px;background:var(--sunken);border-radius:4px;overflow:hidden}
.cb-peg{display:block;height:100%;background:var(--title)}
.cb-srow b{width:32px;text-align:right;font-variant-numeric:tabular-nums}
.cb-starter{display:flex;align-items:center;gap:8px;justify-content:center;margin:6px 0}
.cb-total{display:flex;align-items:center;justify-content:center;min-width:34px;font-weight:800;font-family:"IBM Plex Mono",monospace;color:var(--gold,#e0a33e);font-size:16px}
.cb-showrow{margin:8px 0}
.cb-showlbl{font-size:13px;color:var(--text-dim);margin-bottom:4px}
.pcard.sel-card{outline:3px solid var(--title);outline-offset:-1px;transform:translateY(-8px)}

/* ===== Cards Against Humanity ===== */
.cah-black{background:#111;color:#fff;border-radius:12px;padding:18px 20px;font-weight:700;font-size:16px;max-width:340px;margin:10px auto;box-shadow:0 6px 20px rgba(0,0,0,.4);line-height:1.4}
.cah-hand,.cah-subs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.cah-white{background:#fdfdfa;color:#111;border-radius:10px;padding:12px 14px;font-weight:600;font-size:13px;max-width:150px;box-shadow:0 2px 6px rgba(0,0,0,.25);animation:card-deal .24s ease both;line-height:1.35}
.cah-white.play{cursor:pointer;transition:transform .1s,box-shadow .1s}
.cah-white.play:hover{transform:translateY(-8px);box-shadow:0 10px 22px rgba(0,0,0,.35)}
.cah-white.winner{outline:3px solid var(--success);box-shadow:0 0 18px rgba(97,193,62,.4)}
.cah-by{margin-top:8px;font-size:11px;color:#888;font-weight:500}

/* ===== Codenames ===== */
.cn-hdr{display:flex;gap:10px;justify-content:center;margin-bottom:8px}
.cn-tag{padding:4px 12px;border-radius:8px;font-weight:800;font-size:13px;color:#fff;opacity:.55}
.cn-tag.on{opacity:1;box-shadow:0 0 12px currentColor}
.cn-tag.red{background:#c0392b}.cn-tag.blue{background:#2471c7}
.cn-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:520px;margin:10px auto}
.cn-cell{background:#e8dcc0;color:#3a2f22;border-radius:6px;padding:12px 4px;text-align:center;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.3px;box-shadow:0 2px 4px rgba(0,0,0,.15);transition:transform .1s;min-height:38px;display:flex;align-items:center;justify-content:center}
.cn-cell.pick{cursor:pointer}.cn-cell.pick:hover{transform:translateY(-3px)}
.cn-cell.c-red{background:#c0392b;color:#fff}.cn-cell.c-blue{background:#2471c7;color:#fff}
.cn-cell.c-neutral{background:#d8c9a3;color:#6b5c40}.cn-cell.c-assassin{background:#1a1a1a;color:#eee}
.cn-cell.rev{filter:brightness(.92);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.cn-cluebox{display:flex;gap:6px;justify-content:center;margin:8px 0;align-items:center}
.cn-clue-in{padding:7px 10px;border-radius:7px;border:1px solid var(--border);background:var(--bg-2);color:var(--fg);width:150px}
.cn-clue-n{width:56px;padding:7px;border-radius:7px;border:1px solid var(--border);background:var(--bg-2);color:var(--fg)}
.cn-log{max-width:400px;margin:8px auto 0;font-size:11px;color:var(--muted);text-align:left}
.cn-logrow{padding:2px 0;border-bottom:1px solid var(--border)}

/* ===== Fibbage ===== */
.fb-round{text-align:center;font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.fb-q{background:var(--accent);color:#fff;border-radius:12px;padding:16px 18px;font-weight:700;font-size:15px;max-width:420px;margin:6px auto 12px;text-align:center;line-height:1.45;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.fb-liebox{display:flex;gap:6px;justify-content:center;max-width:420px;margin:0 auto}
.fb-lie-in{flex:1;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg-2);color:var(--fg);font-size:14px}
.fb-opts{display:flex;flex-direction:column;gap:8px;max-width:440px;margin:8px auto}
.fb-opt{background:var(--bg-2);border:1px solid var(--border);border-radius:9px;padding:12px 14px;font-weight:600;font-size:14px;position:relative;animation:card-deal .2s ease both}
.fb-opt.pick{cursor:pointer;transition:transform .1s,border-color .1s}
.fb-opt.pick:hover{transform:translateX(4px);border-color:var(--accent)}
.fb-opt.mine{opacity:.6;border-style:dashed}
.fb-opt.truth{border-color:var(--success);background:rgba(97,193,62,.12)}
.fb-tag{position:absolute;right:10px;top:10px;font-size:10px;color:var(--muted);font-weight:500}
.fb-by{margin-top:6px;font-size:11px;color:var(--muted);font-weight:500}
.fb-picked{margin-top:2px;font-size:11px;color:var(--warn,#e0a800);font-weight:600}
.fb-deltas{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:10px 0}

/* ===== Ludo ===== */
.ludo-board{display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);gap:1px;width:min(92vw,440px);aspect-ratio:1;margin:10px auto;background:var(--border);border-radius:8px;padding:4px;position:relative}
.lu-cell{background:var(--bg-2);border-radius:1px}
.lu-blank{background:transparent}
.lu-track{background:#fbfbf8;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.lu-safe{background:#e9e2c9}
.lu-safe::after{content:"★";font-size:8px;color:#b7a95a;display:flex;align-items:center;justify-content:center;height:100%}
.lu-yard-red{background:#f4c6c0}.lu-yard-green{background:#c2e6c8}.lu-yard-yellow{background:#f4e6b0}.lu-yard-blue{background:#bcd7f2}
.lu-home-red{background:#e74c3c!important}.lu-home-green{background:#27ae60!important}.lu-home-yellow{background:#f1c40f!important}.lu-home-blue{background:#2980d9!important}
.lu-center{background:conic-gradient(#e74c3c 0 90deg,#f1c40f 90deg 180deg,#2980d9 180deg 270deg,#27ae60 270deg)}
.lu-token{border-radius:50%;width:70%;height:70%;align-self:center;justify-self:center;box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 1px 2px rgba(255,255,255,.6);border:1.5px solid rgba(0,0,0,.35);z-index:3;transition:transform .18s ease}
.lu-token.lu-red{background:radial-gradient(circle at 35% 30%,#ff7a6b,#c0392b)}
.lu-token.lu-green{background:radial-gradient(circle at 35% 30%,#5fd67f,#1e8449)}
.lu-token.lu-yellow{background:radial-gradient(circle at 35% 30%,#ffe680,#d4ac0d)}
.lu-token.lu-blue{background:radial-gradient(circle at 35% 30%,#7ab6f0,#1f618d)}
.lu-token.done{opacity:.55}
.lu-token.movable{cursor:pointer;animation:lu-pulse 1s ease-in-out infinite;z-index:5}
@keyframes lu-pulse{0%,100%{transform:scale(1);box-shadow:0 1px 3px rgba(0,0,0,.5)}50%{transform:scale(1.22);box-shadow:0 0 10px 3px rgba(255,255,255,.7)}}
.lu-ctl{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:8px}
.lu-die{width:42px;height:42px;border-radius:10px;background:#fff;color:#111;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 -3px 0 rgba(0,0,0,.1)}
.ludo-chip.on{outline:2px solid var(--accent);box-shadow:0 0 8px var(--accent)}
.ludo-chip.lu-red{border-left:4px solid #e74c3c}.ludo-chip.lu-green{border-left:4px solid #27ae60}.ludo-chip.lu-yellow{border-left:4px solid #f1c40f}.ludo-chip.lu-blue{border-left:4px solid #2980d9}

/* ===== Mafia / Werewolf ===== */
.mf-phase{text-align:center;font-weight:800;font-size:17px;padding:8px 0;border-radius:10px;margin-bottom:10px;letter-spacing:.5px}
.mf-phase.mf-night{background:linear-gradient(135deg,#1a1c3a,#2d1b4e);color:#c7b8ff}
.mf-phase.mf-day{background:linear-gradient(135deg,#ffd97a,#ffb454);color:#5a3e00}
.mf-phase.mf-done{background:var(--bg-2);color:var(--fg);border:1px solid var(--border)}
.mf-role{text-align:center;padding:10px 14px;border-radius:10px;margin-bottom:8px;font-size:14px;background:var(--bg-2);border:1px solid var(--border)}
.mf-role .mf-ricon{font-size:20px;vertical-align:middle;margin-right:4px}
.mf-role-mafia{background:rgba(192,57,43,.15);border-color:#c0392b}
.mf-role-doctor{background:rgba(39,174,96,.15);border-color:#27ae60}
.mf-role-detective{background:rgba(41,128,217,.15);border-color:#2980d9}
.mf-role.dead{opacity:.55;filter:grayscale(.5)}
.mf-fellow{text-align:center;font-size:12px;color:#e08b7a;margin:-4px 0 8px;font-weight:600}
.mf-intel{background:rgba(41,128,217,.1);border:1px solid #2980d9;border-radius:9px;padding:8px 12px;margin:8px 0;font-size:12px}
.mf-intel-h{font-weight:700;margin-bottom:4px}
.mf-intel-row{padding:1px 0}
.mf-action{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:12px;margin:10px 0}
.mf-action-h{font-weight:700;font-size:14px;margin-bottom:8px;text-align:center}
.mf-targets{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.mf-target{background:var(--bg-1,var(--bg));border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-weight:600;font-size:13px;cursor:pointer;transition:transform .1s,border-color .1s;position:relative}
.mf-target:hover{transform:translateY(-2px);border-color:var(--accent)}
.mf-target.chosen{background:var(--accent);color:#fff;border-color:var(--accent)}
.mf-votecount{position:absolute;top:-7px;right:-7px;background:#c0392b;color:#fff;border-radius:50%;min-width:18px;height:18px;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:800}
.mf-roster{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0}
.mf-p{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12px;min-width:64px}
.mf-p.dead{opacity:.45;text-decoration:line-through}
.mf-p-name{font-weight:600}
.mf-p-role{font-size:11px;color:var(--muted);text-transform:capitalize}
.mf-log{max-width:440px;margin:8px auto 0;font-size:12px;text-align:left;background:var(--bg-2);border-radius:8px;padding:8px 12px}
.mf-logrow{padding:2px 0;border-bottom:1px solid var(--border);line-height:1.35}
.mf-logrow:last-child{border-bottom:none}

/* ===== Game-over summary card ===== */
.gs-over{margin-top:14px;padding:16px 18px;border-radius:14px;background:var(--bg-2);border:1px solid var(--border);text-align:center;animation:card-deal .3s ease both}
.gs-over-head{font-size:22px;font-weight:800;letter-spacing:.3px}
.gs-over-head.win{color:var(--success,#61c13e)}
.gs-over-head.lose{color:var(--muted)}
.gs-over-head.draw{color:var(--accent)}
.gs-over-sub{margin-top:4px;font-size:14px;color:var(--muted)}
.gs-again{margin-top:12px}

/* ===== Boggle ===== */
.bg-timer{text-align:center;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--fg);margin-bottom:8px}
.bg-timer.low{color:#e74c3c;animation:bg-pulse .8s ease-in-out infinite}
@keyframes bg-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.bg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(80vw,300px);margin:0 auto 12px}
.bg-die{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:26px;background:linear-gradient(145deg,#fffdf5,#e8e2cf);color:#2a2a2a;border-radius:10px;box-shadow:0 3px 0 #b8b09a,0 4px 8px rgba(0,0,0,.25);text-transform:uppercase;user-select:none;animation:card-deal .3s ease both}
.bg-entry{display:flex;gap:6px;justify-content:center;max-width:340px;margin:0 auto 8px}
.bg-input{flex:1;padding:11px 14px;border-radius:9px;border:2px solid var(--accent);background:var(--bg-2);color:var(--fg);font-size:16px;text-transform:lowercase}
.bg-mine-h{text-align:center;font-size:12px;color:var(--muted);margin:8px 0 4px;font-weight:600}
.bg-words{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:420px;margin:0 auto}
.bg-word{background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:12px;font-weight:600}
.bg-word.dup{opacity:.5;text-decoration:line-through;color:#e74c3c}
.bg-results{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.bg-rescol{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-width:120px;max-width:180px}
.bg-rescol.win{border-color:var(--success,#61c13e);box-shadow:0 0 14px rgba(97,193,62,.3)}
.bg-resname{font-weight:800;text-align:center;margin-bottom:6px}
.bg-reswords{display:flex;flex-wrap:wrap;gap:4px}

/* chopsticks split controls */
.gs-chop-splits{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:8px}
.gs-split{padding:5px 10px!important;font-variant-numeric:tabular-nums}

/* ===== Ghost ===== */
.gh-progress{display:flex;gap:14px;justify-content:center;margin-bottom:12px}
.gh-player{padding:8px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-2);text-align:center}
.gh-player.active{border-color:var(--accent);box-shadow:0 0 10px rgba(0,0,0,.15)}
.gh-plabel{font-size:12px;color:var(--muted);margin-bottom:4px}
.gh-tag{display:flex;gap:4px}
.gh-letter{width:22px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:5px;background:var(--bg-1,var(--bg));border:1px solid var(--border);font-weight:800;color:var(--muted);opacity:.4}
.gh-letter.lit{opacity:1;color:#fff;background:#c0392b;border-color:#c0392b}
.gh-frag{text-align:center;font-size:32px;font-weight:800;letter-spacing:4px;margin:10px 0;min-height:40px;font-family:ui-monospace,monospace}
.gh-input{text-transform:uppercase;text-align:center;max-width:80px}
/* ===== Word Chain ===== */
.wc-head{text-align:center;font-weight:700;font-size:15px;margin-bottom:10px}
.wc-chain{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin-bottom:8px}
.wc-word{background:var(--bg-2);border:1px solid var(--border);border-radius:7px;padding:5px 10px;font-weight:600;font-size:13px}
.wc-word:last-of-type{border-color:var(--accent);background:var(--accent);color:#fff}
.wc-arrow{color:var(--muted)}

/* ===== Scattergories ===== */
.sg-head{text-align:center;font-weight:800;font-size:16px;margin:6px 0 10px}
.sg-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;max-width:560px;margin:0 auto}
@media(max-width:520px){.sg-grid{grid-template-columns:1fr}}
.sg-row{display:flex;flex-direction:column;gap:2px}
.sg-cat{font-size:11px;color:var(--muted);font-weight:600}
.sg-input{padding:7px 10px;border-radius:7px;border:1px solid var(--border);background:var(--bg-2);color:var(--fg);font-size:14px}
.sg-input:focus{border-color:var(--accent);outline:none}
.sg-results{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.sg-rescol{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:10px;min-width:150px;max-width:220px}
.sg-resname{font-weight:800;text-align:center;margin-bottom:6px}
.sg-resrow{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:2px 0;border-bottom:1px solid var(--border)}
.sg-resrow.good .sg-resp{color:var(--success,#61c13e);font-weight:700}
.sg-resrow.dup{opacity:.7}.sg-resrow.dup .sg-resp{color:#e0a800}
.sg-resrow.bad{opacity:.5}.sg-resrow.bad .sg-resp{color:#e74c3c}
.sg-resa{text-transform:capitalize}

/* spades cumulative score bar */
.sp-gamescore{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px;font-weight:700;font-size:13px}
.sp-team.a{color:#2980d9}.sp-team.b{color:#c0392b}
.sp-vs{font-size:11px;color:var(--muted);font-weight:500}

/* euchre going-alone button */
.gs-btn.eu-alone{padding:8px 10px!important;opacity:.85}

/* dominoes: tile that fits both ends */
.dom-tile.both-ends{outline:2px solid var(--accent)}

/* ==================================================================
   FACEBOOK SKIN — layered over the token system (revert: git reset --hard pre-facebook-redesign)
   ================================================================== */
body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"Open Sans",sans-serif; }

/* ---- Top navbar: FB blue bar, brand badge, search, centered nav, right cluster ---- */
.navbar{ height:56px; flex-basis:56px; box-shadow:0 1px 2px rgba(0,0,0,.2); z-index:50; }
.navbar-inner{ gap:12px; padding:0 12px; }
.nav-left{ display:flex; align-items:center; gap:8px; }
.logo{ width:40px; height:40px; border-radius:50%; background:#fff; color:var(--fb-navy); font-size:22px; font-weight:900;
  display:flex; align-items:center; justify-content:center; letter-spacing:-1px; text-transform:lowercase; box-shadow:0 1px 3px rgba(0,0,0,.25); }

.chat-nav{ gap:8px; font-size:22px; }
.chat-nav span{ width:96px; max-width:12vw; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.72); cursor:pointer; transition:background .1s; }
.chat-nav span:hover{ background:rgba(255,255,255,.12); color:#fff; }
.chat-nav span.active{ color:#fff; box-shadow:inset 0 -3px 0 #fff; border-radius:8px 8px 0 0; }

.top-right-nav{ gap:8px; }
.navbar .btn-icon{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center; }
.navbar .btn-icon:hover{ background:rgba(255,255,255,.30); }
.user-pill{ background:rgba(255,255,255,.18); border-radius:999px; padding:4px 12px 4px 4px; gap:8px; }
.user-pill .name{ font-size:15px; font-weight:600; color:#fff; }
.user-pill .avatar-wrap{ width:32px; height:32px; }
#status-pill .dot{ width:12px; height:12px; }

/* ---- Body columns become FB cards on a gray canvas ---- */
.main{ background:var(--bg); padding:8px; gap:8px; }
.left,.center,.right{ border-radius:12px; box-shadow:var(--fb-shadow); overflow:hidden; border:1px solid var(--border); background:var(--panel); }
.right{ border-left:1px solid var(--border); }

/* ---- Room strip / tabs ---- */
.tabbar{ background:var(--panel); }
.room-ava{ border-radius:50%!important; }

/* ---- Chat header + messages ---- */
.tab-header{ height:52px; flex-basis:52px; }
.tab-header .title{ color:var(--text); font-weight:800; font-size:17px; }
.tab-header .description{ color:var(--text-dim); }
.messages{ padding:12px 16px; }
.msg{ padding:6px 8px; border-radius:10px; }
.msg:hover{ background:var(--hover); }
.msg .user-name{ color:var(--text); }
.msg .message-text{ color:var(--text); }

/* ---- Composer as an FB rounded input ---- */
.composer{ padding:10px 14px; gap:8px; }
.composer-input{ background:var(--search); border-radius:20px; padding:9px 14px; }
.composer-input:empty:before{ color:var(--muted); }
.composer-tools{ color:var(--fb-blue); }
.composer-tools .gif{ color:var(--fb-blue); border-color:var(--fb-blue); }
.composer-globe{ border-color:var(--fb-blue); color:var(--fb-blue); }

/* ---- Search inputs (left list) ---- */
.search{ background:var(--search); border:1px solid transparent; border-radius:999px; }
.user-item{ border-radius:8px; }

/* ---- Right rail ---- */
.rtab{ border-radius:8px; }
.rtab.active{ background:var(--fb-blue); color:#fff; }
.rsec-h{ color:var(--text-dim); }
.rfooter{ color:var(--text-dim); }

/* links / accents */
a{ color:var(--fb-blue); }

/* ---- Status: presence dots + away/busy row treatment (no invisible) ---- */
.dot.online{ background:var(--success); } .dot.away{ background:#f0a500; } .dot.busy{ background:var(--danger); }
.u-av .pres-online{ background:var(--success); }
.u-av .pres-away{ background:#f0a500; }
.u-av .pres-busy{ background:var(--danger); }
.user-item.is-away{ opacity:.55; }
.user-item.is-busy .u-sub{ color:var(--danger); }
.dd-note{ padding:8px 14px; font-size:11px; color:var(--text-dim); border-top:1px solid var(--border); line-height:1.4; }

/* (audit) IP-bans modal rows + muted mic toggle */
.ipban-row{ display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--border); font-size:13px; }
.ipban-ip{ font-family:ui-monospace,monospace; font-weight:600; }
.ipban-name{ color:var(--text-dim); flex:1; }
.picker-btn.muted{ background:var(--danger); color:#fff; }
.here-count i{ font-size:11px; opacity:.7; }

/* (redesign) modern header: brand wordmark + right-cluster nav */
.brand-word{ color:#fff; font-weight:800; font-size:19px; letter-spacing:-.3px; margin:0 2px 0 -2px; }
@media(max-width:680px){ .brand-word{ display:none; } }
.nav-div{ width:1px; height:26px; background:rgba(255,255,255,.28); margin:0 6px; flex:0 0 1px; }
.navbar .btn-icon.nav-act{ font-size:17px; }

/* ===== Auth modal (Log in / Register / Guest) ===== */
.auth-modal{ max-width:360px; }
.auth-brand{ display:flex; align-items:center; gap:10px; font-size:22px; font-weight:800; padding:18px 18px 6px; }
.auth-logo{ width:36px; height:36px; border-radius:50%; background:var(--fb-navy,#3b5998); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; }
.auth-tabs{ display:flex; gap:4px; padding:0 18px; border-bottom:1px solid var(--border); }
.auth-tab{ flex:1; background:none; border:0; padding:10px 4px; font-weight:600; color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent; }
.auth-tab.active{ color:var(--fb-blue,#1877f2); border-bottom-color:var(--fb-blue,#1877f2); }
.auth-hint{ font-size:12px; color:var(--text-dim); margin-top:10px; line-height:1.4; }

/* ===== Profile: bio / pronouns / links / favorites / edit ===== */
.pf-pron{ font-size:12px; color:var(--text-dim); font-weight:600; background:var(--elev); padding:1px 7px; border-radius:10px; }
.pf-meta{ font-size:12px; color:var(--text-dim); margin-top:2px; }
.pf-bio{ padding:12px 16px; font-size:14px; line-height:1.5; white-space:pre-wrap; border-top:1px solid var(--border); }
.pf-links{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 16px; }
.pf-link{ display:inline-flex; align-items:center; gap:6px; background:var(--elev); border-radius:16px; padding:5px 12px; font-size:13px; font-weight:600; color:var(--text); text-decoration:none; }
.pf-link:hover{ background:var(--hover); }
.pf-section-h{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); padding:10px 16px 4px; font-weight:700; }
.pf-favs{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 10px; }
.pf-fav{ background:var(--elev); border-radius:6px; padding:3px 9px; font-size:12px; font-weight:600; }
.pf-edit{ border-top:1px solid var(--border); padding:8px 16px 16px; display:flex; flex-direction:column; gap:8px; }
.pf-edit label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--text-dim); font-weight:600; }
.pf-edit input,.pf-edit textarea{ background:var(--search); border:1px solid var(--border); border-radius:8px; padding:8px 10px; color:var(--text); font-size:14px; font-family:inherit; }
.pf-edit textarea{ resize:vertical; min-height:52px; }
.pf-links-edit{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pf-linkedit{ flex-direction:row!important; align-items:center; gap:8px; }
.pf-linkedit i{ width:18px; text-align:center; color:var(--text-dim); }
.pf-linkedit input{ flex:1; min-width:0; }
.pf-sex-row{ display:flex; align-items:center; gap:8px; }
.pf-sexlabel{ font-size:12px; color:var(--text-dim); font-weight:600; }

/* ===== Bots: My Bots panel + approvals ===== */
.bot-new{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.bot-new input#bot-name{ flex:1; min-width:120px; background:var(--search); border:1px solid var(--border); border-radius:8px; padding:8px 10px; color:var(--text); }
.bot-cap{ font-size:13px; color:var(--text-dim); display:flex; align-items:center; gap:4px; }
.bot-list{ display:flex; flex-direction:column; gap:6px; }
.bot-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px; background:var(--card); border:1px solid var(--border); border-radius:8px; font-size:13px; }
.bot-nm{ font-weight:700; display:flex; align-items:center; gap:6px; }
.bot-st{ font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; }
.bot-st.ok{ background:rgba(49,162,76,.15); color:var(--success); }
.bot-st.pend{ background:rgba(247,185,40,.18); color:#c98a00; }
.bot-caps{ color:var(--text-dim); font-size:12px; }
.bot-acts{ margin-left:auto; display:flex; gap:6px; }
/* ghost = outline button; danger stays legible (never red text on red bg) */
.gs-btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--border); }
.gs-btn.ghost:hover{ background:var(--hover); }
.gs-btn.ghost.danger{ background:transparent; color:var(--danger); border-color:var(--danger); }
.gs-btn.danger{ background:var(--danger); color:#fff; }
/* (redesign) push the right-hand nav cluster flush to the edge */
.top-right-nav{ margin-left:auto; }

/* user pill account dropdown */
.user-pill{ cursor:pointer; }
.user-dd{ min-width:180px; }
.dropdown .dd-item.danger{ color:var(--danger); }
.dropdown .dd-item.danger:hover{ background:rgba(228,30,63,.12); }

/* (redesign) chat-color picker: prominent preview bar + gradient on/off switch */
.color-preview{ display:flex; align-items:center; gap:2px; padding:12px 14px; margin:8px 12px; border-radius:10px; background:var(--sunken); border:1px solid var(--border); font-weight:700; font-size:15px; overflow:hidden; white-space:nowrap; }
.cp-grad{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); font-weight:600; }
.cp-switch{ position:relative; width:38px; height:22px; display:inline-block; }
.cp-switch input{ opacity:0; width:0; height:0; position:absolute; }
.cp-slider{ position:absolute; inset:0; background:var(--border); border-radius:999px; transition:background .15s; }
.cp-slider:before{ content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.3); }
.cp-switch input:checked + .cp-slider{ background:var(--fb-blue,#1877f2); }
.cp-switch input:checked + .cp-slider:before{ transform:translateX(16px); }

/* ===== Additional themes ===== */
:root[data-theme-name="rose"]{
  --bg:#fdf2f5; --panel:#ffffff; --left:#fbe9ee; --header:#b0355a; --search:#f6e2e8;
  --title:#d6336c; --line:#f0d6de; --hover:#fbeef2; --arrow:#e8c4d0; --muted:#9a7a84;
  --text:#2a1820; --text-dim:#7a5c66; --card:#ffffff; --elev:#f6e2e8; --sunken:#f6e8ec; --border:#eccdd7;
  --danger:#e41e3f; --success:#31a24c; --star:#f7b928; --fb-blue:#d6336c; --fb-navy:#b0355a;
}
:root[data-theme-name="slate"]{
  --bg:#1a1d23; --panel:#1a1d23; --left:#161920; --header:#2b3340; --search:#242a33;
  --title:#6ea8fe; --line:#12151a; --hover:#242a33; --arrow:#39414d; --muted:#7d8794;
  --text:#dfe3e8; --text-dim:#98a2b0; --card:#20252d; --elev:#2a313b; --sunken:#12151a; --border:#333b46;
  --danger:#ff6b6b; --success:#4ac97a; --star:#ffd86b; --fb-blue:#6ea8fe; --fb-navy:#2b3340;
}
:root[data-theme-name="sunset"]{
  --bg:#26191a; --panel:#26191a; --left:#1f1414; --header:#7a3b2e; --search:#331f1e;
  --title:#ff8f5e; --line:#1a1010; --hover:#331f1e; --arrow:#4a2c26; --muted:#9c8079;
  --text:#f0e0da; --text-dim:#b39a90; --card:#301f1e; --elev:#3a2624; --sunken:#1a1010; --border:#4a2f2a;
  --danger:#ff5c5c; --success:#5fce8f; --star:#ffc15e; --fb-blue:#ff8f5e; --fb-navy:#7a3b2e;
}
:root[data-theme-name="grape"]{
  --bg:#1e1a2e; --panel:#1e1a2e; --left:#181426; --header:#4a3a6b; --search:#2a2440;
  --title:#b57edc; --line:#141021; --hover:#2a2440; --arrow:#3a3158; --muted:#8b83a3;
  --text:#e8e2f2; --text-dim:#a99fc4; --card:#251f38; --elev:#2f2848; --sunken:#141021; --border:#3a3158;
  --danger:#ff6b8a; --success:#5fd67f; --star:#f1c968; --fb-blue:#b57edc; --fb-navy:#4a3a6b;
}
:root[data-theme-name="mint"]{
  --bg:#eef6f1; --panel:#ffffff; --left:#e3f0e8; --header:#2f6b4f; --search:#e0efe6;
  --title:#1f9d63; --line:#d5e7dd; --hover:#e8f3ec; --arrow:#bcd8c8; --muted:#6f8a7c;
  --text:#152720; --text-dim:#4f6b5e; --card:#ffffff; --elev:#e0efe6; --sunken:#e8f3ec; --border:#c9e0d3;
  --danger:#e0483f; --success:#1f9d63; --star:#e0a12a; --fb-blue:#1f9d63; --fb-navy:#2f6b4f;
}
/* custom theme uses a base palette (light/midnight) + inline --title/--header/--fb-blue overrides set in JS */

/* (redesign) Layout panel: custom theme + consolidated cam controls */
.custom-ed{ margin:8px 0 4px; display:flex; flex-direction:column; gap:8px; padding:10px 12px; background:var(--sunken); border:1px solid var(--border); border-radius:10px; }
.custom-ed input[type=color]{ width:44px; height:28px; border:1px solid var(--border); border-radius:6px; background:none; cursor:pointer; }
.layout-opts{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.lo-row{ display:flex; align-items:center; gap:8px; }
.lo-lbl{ font-size:13px; color:var(--text-dim); font-weight:600; min-width:88px; }
.lo-row .gs-btn{ padding:6px 12px; font-size:13px; }
.gs-btn.ghost.on{ background:var(--fb-blue,var(--title)); color:#fff; border-color:transparent; }
.theme-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* (redesign) docked rail: full-width block at the bottom of the host rail, room expands into the freed column */
.left.docked, .right.docked{ width:100%!important; flex:1 1 0; min-height:120px; overflow-y:auto; border-left:0; border-radius:0; border-top:1px solid var(--border); box-shadow:none; }
/* host's primary content must share the column (list-section is height:100% by default, which squeezed the docked rail) */
.left.dock-host .list-section{ height:auto!important; flex:1 1 0; min-height:120px; }
.dock-resize{ touch-action:none; }
.rail-dock.on{ color:var(--fb-blue,var(--title)); }
.rail-dock{ cursor:pointer; }

/* ===== Room-link card (modern embed) + room-manage panel ===== */
.room-card{ display:flex; align-items:stretch; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:8px 0; max-width:420px; box-shadow:var(--fb-shadow,0 1px 3px rgba(0,0,0,.12)); }
.rc-img{ width:76px; flex:0 0 76px; background-size:cover; background-position:center; }
.rc-noimg{ display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:24px; letter-spacing:-.5px; }
.rc-body{ flex:1; min-width:0; padding:10px 12px; display:flex; flex-direction:column; justify-content:center; }
.rc-eyebrow{ font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-dim); font-weight:800; margin-bottom:1px; }
.rc-name{ font-weight:800; font-size:15px; line-height:1.2; }
.rc-topic{ font-size:12px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.rc-count{ font-size:12px; color:var(--text-dim); margin-top:4px; }
.rc-join{ align-self:center; margin:0 12px; padding:8px 20px!important; border-radius:8px; background:var(--fb-blue,var(--title))!important; }
.rm-input{ flex:1; min-width:0; background:var(--search); border:1px solid var(--border); border-radius:8px; padding:7px 10px; color:var(--text); }
.rm-stats{ display:flex; flex-wrap:wrap; gap:14px; margin:6px 0; }
.rm-stat{ font-size:13px; color:var(--text-dim); } .rm-stat b{ color:var(--text); font-size:15px; }
.rm-since{ font-size:12px; color:var(--text-dim); margin-top:4px; }
.rm-roles{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.rm-role{ background:var(--elev); border-radius:6px; padding:3px 8px; font-size:12px; }

/* ===== Rich embeds: YouTube / Spotify / images ===== */
.embed-yt,.embed-spotify,.embed-img{ margin:8px 0; max-width:400px; }
.embed-yt{ position:relative; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
.embed-yt .yt-thumb{ width:100%; height:100%; background-size:cover; background-position:center; cursor:pointer; position:relative; }
.embed-yt .yt-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.embed-yt .yt-play i{ color:#fff; font-size:24px; background:rgba(0,0,0,.62); width:64px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.embed-yt iframe{ width:100%; height:100%; border:0; display:block; }
.embed-spotify iframe{ width:100%; border:0; display:block; border-radius:12px; }
.embed-image{ max-width:400px; max-height:340px; border-radius:12px; cursor:pointer; display:block; }
/* dock resize handle */
.dock-resize{ height:8px; flex:0 0 8px; cursor:ns-resize; background:var(--border); position:relative; }
.dock-resize:hover{ background:var(--fb-blue,var(--title)); }
.dock-resize:before{ content:""; position:absolute; left:50%; top:2px; transform:translateX(-50%); width:36px; height:4px; border-radius:2px; background:var(--muted); }

/* Navbar tracks the theme's --header (see .navbar rule above). Default "blue" theme = #1877f2,
   so the FB-blue bar is the out-of-box look, and modal/PM/stage-banner chrome matches it. */

/* invite modal rows */
.inv-results{ display:flex; flex-direction:column; gap:4px; margin:6px 0; max-height:220px; overflow-y:auto; }
.inv-row{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; }
.inv-row:hover{ background:var(--hover); }
.inv-ava{ width:32px; height:32px; border-radius:50%; flex:0 0 32px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:12px; }
.inv-name{ flex:1; font-weight:600; }
.inv-row .gs-btn{ padding:5px 12px; font-size:12px; }

/* ---- multi-session approval overlays (a new tab/device waits for an active session to approve) ---- */
.sess-ov{ position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:20px; }
.sess-card{ background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:22px 24px; max-width:380px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,.35); text-align:center; }
.sess-card h3{ margin:0 0 8px; font-size:18px; }
.sess-card p{ margin:6px 0; color:var(--text-dim); font-size:14px; line-height:1.5; }
.sess-card .sess-sub{ font-size:12px; color:var(--muted); }
.sess-meta{ display:flex; flex-direction:column; gap:6px; align-items:center; margin:12px 0; font-size:13px; color:var(--text); }
.sess-meta i{ color:var(--title); margin-right:6px; }
.sess-btns{ display:flex; gap:10px; justify-content:center; margin-top:16px; }
.sess-spin{ width:34px; height:34px; margin:2px auto 12px; border:3px solid var(--border); border-top-color:var(--title); border-radius:50%; animation:sess-spin .8s linear infinite; }
@keyframes sess-spin{ to{ transform:rotate(360deg); } }

/* ---- Active Sessions panel ---- */
.sess-list{ display:flex; flex-direction:column; gap:8px; }
.sess-row{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--card); }
.sess-row.current{ border-color:var(--title); }
.sess-ico{ width:36px; height:36px; border-radius:8px; background:var(--sunken); display:flex; align-items:center; justify-content:center; color:var(--title); flex:0 0 36px; }
.sess-info{ flex:1 1 auto; min-width:0; }
.sess-dev{ font-weight:700; font-size:14px; color:var(--text); display:flex; align-items:center; gap:8px; }
.sess-line{ font-size:12px; color:var(--text-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sess-badge{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; background:var(--sunken); color:var(--text-dim); }
.sess-badge.on{ background:rgba(49,162,76,.15); color:var(--success); }
.sess-badge.off{ background:var(--sunken); color:var(--muted); }

/* ---- image lightbox (in-page overlay; no new tab) ---- */
.lightbox{ position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; padding:32px; cursor:zoom-out; }
.lb-img{ max-width:92vw; max-height:88vh; border-radius:8px; box-shadow:0 12px 48px rgba(0,0,0,.6); cursor:default; object-fit:contain; }
.lb-close,.lb-open{ position:fixed; top:18px; width:42px; height:42px; border-radius:50%; border:0; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.15); cursor:pointer; font-size:18px; text-decoration:none; }
.lb-close{ right:18px; }
.lb-open{ right:70px; font-size:15px; }
.lb-close:hover,.lb-open:hover{ background:rgba(255,255,255,.30); }

/* ---- whois / account-fingerprint moderation modal ---- */
.wi-grid{ display:grid; grid-template-columns:96px 1fr; gap:6px 12px; margin-bottom:14px; font-size:13px; }
.wi-k{ color:var(--text-dim); font-weight:600; }
.wi-v{ color:var(--text); word-break:break-word; }
.wi-v.mono,.ipban-ip.mono{ font-family:"IBM Plex Mono","Courier New",monospace; font-size:12px; }
.wi-ban{ color:var(--danger); font-weight:700; font-size:12px; margin-left:4px; }
.wi-warn{ color:#e0a33e; font-weight:700; }
.wi-alts{ display:flex; flex-direction:column; gap:5px; margin:6px 0 14px; }
.wi-alt{ display:flex; align-items:center; justify-content:space-between; padding:7px 10px; background:var(--sunken); border-radius:6px; }
.wi-alt-name{ font-weight:600; }
.wi-tag{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:999px; margin-left:6px; }
.wi-tag.dev{ background:rgba(224,163,62,.18); color:#e0a33e; }
.wi-tag.ip{ background:rgba(24,119,242,.15); color:var(--title); }
.wi-none{ color:var(--text-dim); font-size:13px; padding:4px 0; }

/* card row for War / Higher-Lower (real cards, not numbers) */
.gs-cardrow{ display:flex; align-items:center; justify-content:center; gap:12px; margin:8px 0; }
.gs-vs{ font-weight:800; color:var(--text-dim); font-size:15px; }
/* whois IP history */
.wi-iphist{ display:flex; flex-direction:column; gap:4px; margin:4px 0 12px; }
.wi-iprow{ display:flex; align-items:center; justify-content:space-between; font-size:12px; padding:5px 8px; background:var(--sunken); border-radius:5px; }
.wi-iprow .mono{ font-family:"IBM Plex Mono",monospace; }
.wi-iprow .wi-when{ color:var(--text-dim); }

/* friend requests (accept/decline) */
.r-item.freq{ display:flex; align-items:center; gap:8px; }
.r-item.freq .r-name{ flex:1; }
.freq-acc{ background:var(--title); color:#fff; border:0; border-radius:6px; padding:5px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.freq-acc:hover{ filter:brightness(1.06); }
.freq-dec{ background:transparent; color:var(--text-dim); border:1px solid var(--border); border-radius:6px; width:26px; height:26px; cursor:pointer; }
.freq-dec:hover{ color:var(--danger); border-color:var(--danger); }
.rtab.has-req{ position:relative; }
.rtab.has-req::after{ content:""; position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--danger); }

/* custom-status input inside the status dropdown */
.dd-status-set{ display:flex; gap:6px; padding:8px 12px; border-top:1px solid var(--border); }
.dd-status-set input{ flex:1; min-width:0; background:var(--search); border:1px solid var(--border); border-radius:6px; color:var(--text); padding:6px 8px; font-size:13px; outline:none; }
.dd-status-set button{ background:var(--title); color:#fff; border:0; border-radius:6px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.dd-status-set button:hover{ filter:brightness(1.06); }

/* ephemeral bot reply (help/usage) — only the caller sees it */
.msg.ephemeral{ background:rgba(24,119,242,.06); border-left:2px solid var(--title); }
.eph-tag{ font-size:11px; color:var(--title); font-weight:600; margin-left:6px; }
.eph-tag i{ font-size:10px; margin-right:3px; }

/* profile image upload */
.pf-av{ position:relative; background-size:cover; background-position:center; }
.pf-av.has-img{ color:transparent; }
.pf-av-up{ position:absolute; right:-2px; bottom:-2px; width:22px; height:22px; border-radius:50%; border:2px solid var(--card); background:var(--title); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; cursor:pointer; padding:0; }
.pf-av-up:hover{ filter:brightness(1.1); }
.u-av.has-img,.m-av.has-img,.r-ava.has-img{ color:transparent; }

/* live camera/mic device switcher popover */
.cam-settings-pop{ position:fixed; z-index:6000; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px 12px; box-shadow:0 10px 30px rgba(0,0,0,.35); width:230px; }
.cam-settings-pop .csp-h{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); font-weight:700; margin:4px 0; }
.cam-settings-pop select{ width:100%; background:var(--search); border:1px solid var(--border); border-radius:6px; color:var(--text); padding:6px 8px; font-size:13px; outline:none; margin-bottom:4px; }

/* ---- Epik News integration (right-panel feed, paste card, reader) — remove this block to revert ---- */
.news-item{ display:flex; gap:10px; padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--line); }
.news-item:hover{ background:var(--hover); }
.ni-img{ width:56px; height:56px; flex:0 0 56px; border-radius:8px; background:center/cover var(--elev); }
.ni-noimg{ display:flex; align-items:center; justify-content:center; color:var(--title); font-size:20px; }
.ni-body{ min-width:0; }
.ni-name{ font-weight:700; font-size:13px; color:var(--text); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ni-excerpt{ font-size:12px; color:var(--text-dim); margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-card{ display:flex; flex-direction:column; max-width:360px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--card); margin-top:6px; }
.news-card .nc-img{ height:150px; background:center/cover var(--elev); }
.news-card .nc-body{ padding:10px 12px; }
.nc-eyebrow{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--title); display:flex; align-items:center; gap:6px; }
.nc-name{ font-weight:700; font-size:14px; color:var(--text); margin-top:3px; }
.nc-excerpt{ font-size:12px; color:var(--text-dim); margin-top:4px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nc-read{ margin:0 12px 12px; align-self:flex-start; }
.news-card-loading .nc-name{ color:var(--text-dim); }
.news-reader-modal{ max-width:640px; width:min(640px,94vw); max-height:88vh; }
.news-reader-modal .nr-body{ overflow-y:auto; max-height:calc(88vh - 52px); }
.nr-cover{ width:100%; border-radius:8px; margin-bottom:12px; }
.nr-title{ font-size:22px; line-height:1.2; margin:0 0 4px; }
.nr-date{ font-size:12px; color:var(--text-dim); margin-bottom:12px; }
.nr-content{ font-size:15px; line-height:1.6; color:var(--text); }
.nr-content p{ margin:0 0 12px; }
.nr-content img{ max-width:100%; height:auto; border-radius:6px; }
.nr-content blockquote{ border-left:3px solid var(--title); margin:12px 0; padding:4px 0 4px 14px; color:var(--text-dim); font-style:italic; }
.nr-open{ display:inline-block; margin-top:14px; text-decoration:none; }

/* Epik News typography — match epikchatnews.com (Playfair Display headings, Inter body) + audio player */
.ni-name,.nc-name{ font-family:"Playfair Display",Georgia,serif; }
.ni-excerpt,.nc-excerpt{ font-family:"Inter","Open Sans",sans-serif; }
.nr-title{ font-family:"Playfair Display",Georgia,serif; font-weight:900; }
.nr-content{ font-family:"Inter","Open Sans",sans-serif; }
.nr-content strong,.nr-content b{ font-weight:700; color:var(--text); }
.nr-content em,.nr-content i{ font-style:italic; }
.nr-content h1,.nr-content h2,.nr-content h3{ font-family:"Playfair Display",Georgia,serif; font-weight:700; line-height:1.25; margin:18px 0 8px; }
.nr-content a{ color:var(--title); }
.nr-content .g-correspondent{ color:var(--text-dim); font-style:italic; font-size:13px; }
.ni-audio{ color:var(--title); font-size:11px; margin-left:4px; }
.nr-audio{ display:flex; flex-direction:column; gap:6px; background:var(--sunken); border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin:0 0 16px; }
.nr-audio-label{ font-size:12px; font-weight:700; color:var(--title); display:flex; align-items:center; gap:6px; }
.nr-audio audio{ width:100%; height:34px; }