/* The live Members' Lounge (club/walk/js/lounge.js), ported from the Club prototype's css/lounge-live.css (the mockup controls dropped; the room card in
   Jade's text box stays in index.html): the table panel, the Full Screen View, the seat map and Club cards inside Jade's HUD.
   Morning light: cream #fbf6ec, ink #2a2420, garnet #9a2a36; Inter body, Cormorant Garamond headings. */
:root { --tp-cream:#fbf6ec; --tp-ink:#2a2420; --tp-garnet:#9a2a36; --tp-line:rgba(154, 42, 54, .22); --tp-soft:#6b6359; --jw: calc(min(26vh, 220px) * 2 / 3); }

/* the panel is out of the way while Jade's HUD is open (her dialogue takes the bottom left) */
body.hud-open #tp { display:none; }
body[data-moving="1"] #tp { opacity:0; pointer-events:none; }

/* ---- the table panel ---- */
#tp { position:fixed; left:16px; bottom:calc(env(safe-area-inset-bottom) + 16px); z-index:18; width:340px; max-height:calc(100dvh - 140px); overflow:auto; overscroll-behavior:contain;
  box-sizing:border-box; padding:16px 16px 14px; background:var(--tp-cream); color:var(--tp-ink); border:1px solid rgba(154, 42, 54, .18); border-radius:14px;
  box-shadow:0 14px 40px rgba(42, 36, 32, .22); font:14px/1.4 Inter, system-ui, sans-serif; transition:opacity .25s ease; }
#tp[hidden] { display:none; }
#tp * { box-sizing:border-box; }
#tp header { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 8px; }
#tp h2 { margin:0; font:600 26px/1.05 'Cormorant Garamond', Georgia, serif; color:var(--tp-ink); }
#tpCount { font:600 12px Inter, sans-serif; color:var(--tp-garnet); letter-spacing:.04em; }
#tpPeople { list-style:none; margin:0 0 10px; padding:0; display:grid; gap:2px; }
#tpPeople .p { display:grid; grid-template-columns:32px 1fr 24px; align-items:center; gap:10px; min-height:40px; padding:2px 0; transition:opacity .25s; }
#tpPeople .p.away { opacity:.5; }
#tpPeople .av { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--c, #2a7a7f); color:#fff; font:600 12px Inter, sans-serif; letter-spacing:.02em; }
#tpPeople .p.you .av { box-shadow:0 0 0 2px var(--tp-cream), 0 0 0 4px var(--tp-garnet); }
#tpPeople .nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
#tpPeople .nm small { margin-left:8px; font:500 11px Inter, sans-serif; color:var(--tp-soft); letter-spacing:.03em; }
#tpPeople .mic { display:grid; place-items:center; color:var(--tp-soft); }
#tpPeople .mic svg { width:18px; height:18px; }
#tpPeople .p.speaking .av { box-shadow:0 0 0 2px var(--tp-cream), 0 0 0 4px var(--tp-garnet); animation:tpPulse 1.1s ease-in-out infinite; }
#tpPeople .p.speaking .mic { color:var(--tp-garnet); }
#tpPeople .tile { grid-column:2 / 4; width:112px; height:72px; border-radius:8px; overflow:hidden; background:var(--c, #2a7a7f); display:grid; place-items:center; color:rgba(255,255,255,.92); font:600 20px 'Cormorant Garamond', Georgia, serif; position:relative; margin:0 0 4px; }
#tpPeople .tile video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); background:#2a2420; }
@keyframes tpPulse { 0%, 100% { box-shadow:0 0 0 2px var(--tp-cream), 0 0 0 4px var(--tp-garnet); } 50% { box-shadow:0 0 0 2px var(--tp-cream), 0 0 0 6px rgba(154, 42, 54, .45); } }
@media (prefers-reduced-motion: reduce) { #tpPeople .p.speaking .av { animation:none; } #tp { transition:none; } }

.tp-ctl { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 8px; padding-top:10px; border-top:1px solid var(--tp-line); }
.tp-btn { min-height:44px; padding:8px 12px; border:1px solid var(--tp-garnet); border-radius:10px; background:transparent; color:var(--tp-garnet); font:600 14px Inter, sans-serif; cursor:pointer; position:relative; overflow:hidden; }
.tp-btn:hover { background:rgba(154, 42, 54, .08); }
.tp-btn[aria-pressed="true"], .tp-btn.on { background:var(--tp-garnet); color:#fff; }
.tp-btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; background:transparent; color:var(--tp-soft); border-color:rgba(107, 99, 89, .5); }
.tp-btn:focus-visible, #tp input:focus-visible, .seg button:focus-visible, #chatToggle:focus-visible { outline:3px solid var(--tp-garnet); outline-offset:2px; }
.meter { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255, 255, 255, .25); display:none; }
.meter i { display:block; height:100%; width:0; background:#fbf6ec; }
#bMic.live .meter { display:block; }
.seg { grid-column:1 / 3; display:grid; grid-template-columns:repeat(3, 1fr); border:1px solid var(--tp-garnet); border-radius:10px; overflow:hidden; }
.seg button { min-height:44px; border:0; border-right:1px solid var(--tp-line); background:transparent; color:var(--tp-garnet); font:600 14px Inter, sans-serif; cursor:pointer; }
.seg button:last-child { border-right:0; }
.seg button[aria-pressed="true"] { background:var(--tp-garnet); color:#fff; }
#tpErr { margin:0 0 6px; min-height:0; font-size:12.5px; color:var(--tp-soft); }
#tpErr:empty { display:none; }
#chatToggle { display:none; min-height:44px; width:100%; margin:0 0 6px; border:1px solid var(--tp-line); border-radius:10px; background:transparent; color:var(--tp-ink); font:600 14px Inter, sans-serif; cursor:pointer; }
#chatToggle[hidden] { display:none; }
#chatWrap { border-top:1px solid var(--tp-line); padding-top:8px; }
#chatWrap[hidden] { display:none; }
#chatLog { list-style:none; margin:0 0 8px; padding:0; max-height:120px; overflow:auto; display:grid; gap:4px; font-size:13.5px; }
#chatLog li b { font-weight:600; margin-right:6px; }
#chatLog li.me b { color:var(--tp-garnet); }
#chatForm { display:flex; gap:8px; }
#chatForm input { flex:1; min-width:0; min-height:44px; padding:8px 12px; border:1px solid rgba(42, 36, 32, .3); border-radius:10px; background:#fff; color:var(--tp-ink); font:14px Inter, sans-serif; }
#chatForm button { flex:none; width:44px; min-height:44px; border:0; border-radius:10px; background:var(--tp-garnet); color:#fff; font:600 20px Inter, sans-serif; cursor:pointer; }
#chatForm button:focus-visible { outline:3px solid var(--tp-garnet); outline-offset:2px; }

/* phones: a compact bottom-left sheet (<= 40% of the height) that leaves Jade visible: people are a row of circles, the text hides behind Chat */
#tpWho, #tpTiles { display:none; }
@media (max-width: 600px) {
  #tp { left:8px; bottom:calc(env(safe-area-inset-bottom) + 8px); width:calc(100vw - var(--jw) - clamp(8px, 2vw, 28px) - 8px - 16px); max-height:40dvh; padding:10px 10px 8px; border-radius:12px; }
  #tp header { margin:0 0 4px; }
  #tp h2 { font-size:20px; }
  #tpPeople { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 4px; }
  #tpPeople .p { display:block; position:relative; min-height:0; padding:0; width:44px; height:44px; }
  #tpPeople .nm, #tpPeople .tile { display:none; }
  #tpPeople .av { width:44px; height:44px; font-size:12px; border:0; padding:0; cursor:pointer; }
  #tpPeople .av:focus-visible { outline:3px solid var(--tp-garnet); outline-offset:2px; }
  #tpPeople .mic { position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; border-radius:50%; background:var(--tp-cream); box-shadow:0 0 0 1px var(--tp-line); }
  #tpPeople .mic svg { width:11px; height:11px; }
  #tpWho:not(:empty) { display:block; margin:0 0 4px; font-size:12.5px; font-weight:500; }
  #tpTiles:not(:empty) { display:flex; gap:6px; margin:0 0 4px; }
  #tpTiles .tile { width:64px; height:44px; border-radius:6px; overflow:hidden; background:var(--c, #2a7a7f); display:grid; place-items:center; color:#fff; font:600 15px 'Cormorant Garamond', Georgia, serif; position:relative; }
  #tpTiles .tile video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
  .tp-ctl { grid-template-columns:repeat(3, 1fr); gap:5px; padding-top:6px; margin:0 0 4px; }
  #tp.notable .tp-ctl { grid-template-columns:1fr 1fr; }
  .tp-btn { padding:4px 2px; font-size:12.5px; }
  .seg { grid-column:1 / -1; }
  .seg button { font-size:13px; padding:0 2px; }
  #tpErr { margin:0 0 4px; font-size:12px; }
  #chatToggle:not([hidden]) { display:block; }
  #chatToggle[aria-expanded="true"] { background:var(--tp-garnet); color:#fff; }
  #chatWrap { display:none; padding-top:6px; }
  #tp.chat-open { width:calc(100vw - 16px); bottom:calc(min(26vh, 220px) + 20px); }
  #tp.chat-open #chatWrap:not([hidden]) { display:block; }
  #chatLog { max-height:64px; margin-bottom:6px; }
}

/* ---- the lounge views in Jade's right panel ---- */
.w-card .lv { padding:2px 0 0; }
.w-card .lv ul { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.w-card .lv .look { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.w-card .lv .look + .look { margin-top:10px; padding-top:10px; border-top:1px solid rgba(154, 42, 54, .2); }
.w-card .lv .look button { display:grid; justify-items:center; gap:2px; min-height:44px; padding:6px 2px 6px; border:1px solid rgba(154, 42, 54, .5); border-radius:10px; background:rgba(255, 255, 255, .5); color:#2a2420; font:600 14px Inter, sans-serif; cursor:pointer; }
.w-card .lv .look img { width:auto; height:96px; display:block; }
.w-card .lv .look button:hover, .w-card .lv .look button:focus-visible { background:#9a2a36; color:#fff; outline:none; }
.w-card .lv .look button:focus-visible { box-shadow:0 0 0 3px rgba(154, 42, 54, .35); }
.w-card .lv .who { display:grid; grid-template-columns:36px 1fr; align-items:center; gap:10px; width:100%; min-height:48px; padding:6px 8px; text-align:left; border:1px solid transparent; border-radius:10px; background:transparent; color:#2a2420; font:500 15px Inter, sans-serif; cursor:pointer; }
.w-card .lv .who:hover, .w-card .lv .who:focus-visible { background:rgba(255, 255, 255, .7); border-color:rgba(154, 42, 54, .35); outline:none; }
.w-card .lv .who:focus-visible { box-shadow:0 0 0 3px rgba(154, 42, 54, .35); }
.w-card .lv .av { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--c, #2a7a7f); color:#fff; font:600 13px Inter, sans-serif; }
.w-card .lv .who small { display:block; font:400 12.5px Inter, sans-serif; color:#6b6359; }
.w-card .clubcard { display:block; }
.w-card .clubcard .cc-top { display:flex; align-items:center; gap:12px; }
.w-card .clubcard .av { width:52px; height:52px; font-size:18px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--c, #2a7a7f); color:#fff; font-family:Inter, sans-serif; font-weight:600; }
.w-card .clubcard .who-txt { min-width:0; }
.w-card .clubcard h3 { margin:0; font-size:26px; line-height:1.1; overflow-wrap:anywhere; }
.w-card .clubcard .handle { margin:2px 0 0; font-size:13px; color:#9a2a36; overflow-wrap:anywhere; }
.w-card .clubcard .about { margin:12px 0 0; font-size:15px; line-height:1.45; }
.w-card .clubcard .cta.sitwith { display:flex; justify-content:center; width:100%; margin-top:14px; min-height:44px; border:0; border-radius:10px; background:#9a2a36; color:#fff; cursor:pointer; font:600 15px Inter, sans-serif; text-transform:none; letter-spacing:0; padding:10px 16px; }
.w-card .clubcard .cta.sitwith:focus-visible { outline:3px solid #2a2420; outline-offset:2px; }
@media (max-width: 600px) {
  .w-card .lv .look img { height:64px; }
  .w-card .lv .look { gap:6px; }
  .w-card .lv .look + .look { margin-top:6px; padding-top:6px; }
  .w-card .lv .look button { font-size:13px; }
  .w-card .clubcard .av { width:44px; height:44px; font-size:16px; }
  .w-card .clubcard h3 { font-size:24px; }
}


/* ---- the seat map in Jade's right panel (owner, 2026-10-09): a calm top-down floor plan of the room's seats ---- */
.w-card .smap { display:grid; gap:14px; }
.w-card .smap > .cta.sitwith { display:flex; justify-content:center; width:100%; min-height:44px; border:0; border-radius:10px; background:#9a2a36; color:#fff; cursor:pointer; font:600 15px Inter, sans-serif; text-transform:none; letter-spacing:0; padding:10px 16px; }
.w-card .smap > .cta.sitwith:focus-visible { outline:3px solid #2a2420; outline-offset:2px; }
.w-card .sgroup { margin:0; }
.w-card .sgroup h4 { margin:0 0 8px; font:600 11px Inter, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#6b6359; }
.w-card .sgroup h4 span { margin-left:8px; color:#9a2a36; letter-spacing:.04em; }
.w-card .tbl { display:grid; justify-items:center; gap:6px; padding:8px 0; border-radius:12px; background:rgba(200, 154, 104, .1); }
.w-card .srow { display:flex; justify-content:center; gap:10px; }
.w-card .srow.d { justify-content:flex-start; gap:8px; }
.w-card .tbl .bar { width:min(100%, 190px); height:14px; border-radius:7px; background:#c89a68; box-shadow:inset 0 -2px 0 rgba(42, 36, 32, .12); }
.w-card .slower { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.w-card .seat { flex:none; width:44px; height:44px; padding:0; border-radius:50%; display:grid; place-items:center; font:600 13px Inter, sans-serif; cursor:pointer; box-sizing:border-box; }
.w-card .seat.empty { border:2px dashed rgba(154, 42, 54, .65); background:rgba(255, 255, 255, .55); }
.w-card .seat.empty:hover { background:rgba(154, 42, 54, .12); }
.w-card .seat.taken { border:0; background:var(--c, #2a7a7f); color:#fff; box-shadow:0 0 0 2px #fbf6ec; }
.w-card .seat.taken.focus { box-shadow:0 0 0 2px #fbf6ec, 0 0 0 4px #8b8378; }
.w-card .seat.taken.away { opacity:.45; }
.w-card .seat.taken.you { background:#9a2a36; box-shadow:0 0 0 2px #fbf6ec, 0 0 0 4px #9a2a36; cursor:default; }
.w-card .seat:focus-visible { outline:3px solid #2a2420; outline-offset:3px; }
.w-card .smap .around { grid-template-columns:1fr 1fr; gap:2px 8px; padding-top:10px; border-top:1px solid rgba(154, 42, 54, .2); }
.w-card .smap .who { grid-template-columns:32px 1fr; gap:8px; font-size:14px; padding:4px 4px; min-height:44px; }
.w-card .smap .who .av { width:32px; height:32px; font-size:12px; }
.w-card .smap .who small { display:inline; margin-left:6px; font-size:11.5px; }
.w-card .slower .sgroup { flex:0 0 auto; }

/* ---- 32 seats (owner, 2026-10-09 later): four long tables in a 2x2 block, the window pairs as a column ---- */
.w-card .smap { gap:10px; }
.w-card .slower { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; justify-content:flex-start; }
.w-card .tblock { display:grid; grid-template-columns:repeat(2, auto); gap:8px 10px; }
.w-card .tblock .sgroup h4, .w-card .pairs h4, .w-card .pr h4 { margin:0 0 4px; font-size:10.5px; letter-spacing:.08em; white-space:nowrap; }
.w-card .tbl { padding:5px 0; gap:3px; width:max-content; padding-inline:2px; }
.w-card .tbl .srow { gap:3px; }
.w-card .tbl .bar { width:136px; height:10px; }
.w-card .pcol { display:grid; gap:4px; }
.w-card .pr h4 { margin-bottom:2px; }
.w-card .srow.d { gap:4px; }
.w-card .smap .around { grid-template-columns:repeat(3, 1fr); gap:0 4px; padding-top:8px; }
.w-card .smap .who { grid-template-columns:28px 1fr; gap:6px; font-size:13px; padding:2px 4px; min-height:44px; }
.w-card .smap .who .av { width:28px; height:28px; font-size:11px; }
.w-card .smap .who span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.w-card .smap .who small { display:block; margin:0; }
@media (min-width: 901px) {
  #walk.mapwide { --cw:430px; }
  #walk.mapwide .w-card > .card { padding:16px 16px 12px; }
}
@media (max-width: 600px) {
  .w-card .pcol { grid-template-columns:repeat(2, auto); gap:4px 12px; }
}
.w-card .tbl { padding-inline:0; }
.w-card .tbl .srow { gap:2px; }
.w-card .tbl .bar { width:136px; }
.w-card .tblock { gap:6px; }
.w-card .slower { gap:10px; flex-wrap:nowrap; }
@media (min-width: 901px) { #walk.mapwide .w-card > .card { padding:16px 14px 12px; } }
@media (max-width: 600px) { .w-card .slower { flex-wrap:wrap; } }

/* ---- the map panel carries the group's controls, and the people list is collapsible ---- */
.w-card .listtoggle { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; padding:6px 10px; border:1px solid rgba(154, 42, 54, .35); border-radius:10px; background:rgba(255, 255, 255, .5); color:#2a2420; font:600 14px Inter, sans-serif; cursor:pointer; }
.w-card .listtoggle:hover { background:rgba(255, 255, 255, .8); }
.w-card .listtoggle:focus-visible { outline:3px solid #2a2420; outline-offset:2px; }
.w-card .listtoggle .chev { width:8px; height:8px; border-right:2px solid #9a2a36; border-bottom:2px solid #9a2a36; transform:rotate(45deg) translateY(-2px); transition:transform .2s; }
.w-card .listtoggle[aria-expanded="true"] .chev { transform:rotate(-135deg) translateY(-2px); }
.w-card .smap .around[hidden] { display:none; }
.w-card .smap .around { border-top:0; padding-top:0; }
.w-card .mctl { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding-top:8px; border-top:1px solid rgba(154, 42, 54, .2); }
.w-card .mctl .tp-btn { min-height:44px; padding:6px 10px; border:1px solid #9a2a36; border-radius:10px; background:transparent; color:#9a2a36; font:600 14px Inter, sans-serif; cursor:pointer; position:static; }
.w-card .mctl .tp-btn:hover { background:rgba(154, 42, 54, .08); }
.w-card .mctl .tp-btn.on, .w-card .mctl .tp-btn[aria-pressed="true"] { background:#9a2a36; color:#fff; }
.w-card .mctl .tp-btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; background:transparent; color:#6b6359; border-color:rgba(107, 99, 89, .5); }
.w-card .mctl .tp-btn:focus-visible { outline:3px solid #2a2420; outline-offset:2px; }
.w-card .merr { grid-column:1 / 3; margin:0; font-size:12.5px; color:#6b6359; }
.w-card .merr:empty { display:none; }
.w-card .mlog { grid-column:1 / 3; list-style:none; margin:0; padding:0; height:72px; overflow:auto; display:block; font-size:13px; line-height:1.4; }
.w-card .mlog li { margin:0 0 2px; }
.w-card .mlog li b { font-weight:600; margin-right:6px; }
.w-card .mlog li.me b { color:#9a2a36; }
.w-card .mform { grid-column:1 / 3; display:flex; gap:6px; }
.w-card .mform input { flex:1; min-width:0; min-height:44px; padding:6px 12px; border:1px solid rgba(42, 36, 32, .3); border-radius:10px; background:#fff; color:#2a2420; font:14px Inter, sans-serif; }
.w-card .mform input:focus-visible, .w-card .mform button:focus-visible { outline:3px solid #2a2420; outline-offset:2px; }
.w-card .mform button { flex:none; width:44px; min-height:44px; border:0; border-radius:10px; background:#9a2a36; color:#fff; font:600 20px Inter, sans-serif; cursor:pointer; }
.w-card .smap .mlog { display:block; }
.w-card .smap .mctl { display:grid; }

/* ---- the table view: your group's videos large over the room; the room dims, Jade stays at the bottom right ---- */
body.tv-open #tp { display:none; }
#tv { position:fixed; inset:0; z-index:14; }
#tv[hidden] { display:none; }
.tv-dim { position:absolute; inset:0; background:rgba(42, 36, 32, .58); }
.tv-win { position:absolute; top:64px; left:24px; bottom:24px; right:calc(clamp(8px, 2vw, 28px) + var(--jw) + 16px); display:flex; flex-direction:column; box-sizing:border-box; padding:16px 18px 14px;
  background:var(--tp-cream); color:var(--tp-ink); border:1px solid rgba(154, 42, 54, .18); border-radius:18px; box-shadow:0 18px 50px rgba(20, 12, 4, .4); font:14px/1.4 Inter, system-ui, sans-serif; }
.tv-win * { box-sizing:border-box; }
.tv-win header { display:flex; align-items:baseline; gap:12px; margin:0 0 10px; }
.tv-win h2 { margin:0; font:600 30px/1.05 'Cormorant Garamond', Georgia, serif; }
.tv-win h2:focus { outline:none; }
#tvCount { font:600 13px Inter, sans-serif; color:var(--tp-garnet); }
.tv-main { flex:1; min-height:0; display:flex; gap:16px; }
.tv-left { flex:1; min-width:0; display:flex; flex-direction:column; }
#tvGrid { flex:1; min-height:0; display:grid; grid-template-columns:repeat(var(--cols, 2), 1fr); align-content:start; gap:12px; width:min(100%, calc((100dvh - 64px - 24px - 32px - 52px - 150px) * var(--cols, 2) / var(--rows, 1) * 1.7778)); }
.tv-tile { position:relative; aspect-ratio:16 / 9; border-radius:14px; overflow:hidden; display:grid; place-items:center; background:#ebe2d0; color:#2a2420; }
.tv-tile .ini { font:600 clamp(28px, 4vw, 56px) 'Cormorant Garamond', Georgia, serif; }
.tv-tile.cam { background:linear-gradient(135deg, var(--c, #2a7a7f), color-mix(in srgb, var(--c, #2a7a7f) 55%, #2a2420)); color:#fff; }
.tv-tile video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); background:#2a2420; }
.tv-tile .camicon { position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; background:rgba(255, 255, 255, .28); display:grid; place-items:center; }
.tv-tile .camicon svg { width:15px; height:15px; }
.tv-tile .chip { position:absolute; left:8px; bottom:8px; max-width:calc(100% - 16px); padding:3px 10px; border-radius:12px; background:rgba(251, 246, 236, .92); color:#2a2420; font:600 12.5px Inter, sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-tile .chip small { margin-left:6px; font:500 11px Inter, sans-serif; color:var(--tp-soft); }
.tv-tile.away { opacity:.55; }
.tv-tile.speaking { box-shadow:0 0 0 3px var(--tp-cream), 0 0 0 6px var(--tp-garnet); animation:tpPulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tv-tile.speaking { animation:none; } }
#tvErr { margin:6px 0 0; font-size:12.5px; color:var(--tp-soft); min-height:0; }
#tvErr:empty { display:none; }
.tv-ctl { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--tp-line); align-items:stretch; }
.tv-ctl .tp-btn { min-width:110px; }
.tv-ctl .seg { width:240px; }
.tv-ctl .tv-back { margin-left:auto; background:var(--tp-garnet); color:#fff; }
#tvChatToggle { display:none; }
.tv-chat { width:280px; flex:none; display:flex; flex-direction:column; border-left:1px solid var(--tp-line); padding-left:16px; min-height:0; }
#tvLog { flex:1; min-height:0; overflow:auto; list-style:none; margin:0 0 8px; padding:0; font-size:13.5px; display:block; }
#tvLog li { margin:0 0 6px; }
#tvLog li b { font-weight:600; margin-right:6px; }
#tvLog li.me b { color:var(--tp-garnet); }
#tvForm { display:flex; gap:8px; }
#tvForm input { flex:1; min-width:0; min-height:44px; padding:8px 12px; border:1px solid rgba(42, 36, 32, .3); border-radius:10px; background:#fff; color:var(--tp-ink); font:14px Inter, sans-serif; }
#tvForm button { flex:none; width:44px; min-height:44px; border:0; border-radius:10px; background:var(--tp-garnet); color:#fff; font:600 20px Inter, sans-serif; cursor:pointer; }
#tvForm input:focus-visible, #tvForm button:focus-visible, .tv-ctl button:focus-visible { outline:3px solid var(--tp-garnet); outline-offset:2px; }
#bTv { grid-column:1 / -1; }
.w-card .mctl .mTv { grid-column:1 / 3; }
@media (max-width: 900px) { .tv-chat { width:220px; } }
@media (max-width: 900px) {
  /* nearly full screen: the bottom band stays free for Jade, whose button stays visible and clickable */
  .tv-win { top:56px; left:8px; right:8px; bottom:calc(min(26vh, 220px) + 18px); padding:10px 10px 8px; border-radius:14px; }
  .tv-win h2 { font-size:22px; }
  #tvGrid { width:100%; gap:8px; overflow:auto; --cols:2; grid-template-columns:repeat(2, 1fr); }
  .tv-chat { display:none; width:auto; border-left:0; padding-left:0; flex:1; }
  .tv-win.chat-open .tv-chat { display:flex; }
  .tv-win.chat-open #tvGrid, .tv-win.chat-open .tv-left { display:none; }
  .tv-win.chat-open .tv-left { display:flex; }
  .tv-ctl { position:static; gap:6px; margin-top:6px; padding-top:6px; }
  .tv-ctl .tp-btn { min-width:0; flex:1 1 calc(50% - 6px); padding:6px 4px; font-size:13px; }
  .tv-ctl .seg { width:100%; flex:1 1 100%; }
  .tv-ctl .tv-back { margin-left:0; flex:1 1 100%; }
  #tvChatToggle { display:block; }
  .tv-main { flex-direction:column; }
  .tv-win.chat-open .tv-left { display:flex; flex:none; }
  .tv-win.chat-open .tv-left > #tvGrid, .tv-win.chat-open .tv-left > #tvErr { display:none; }
}

@media (max-width: 900px) {
  .tv-win.chat-open .tv-left { display:flex !important; flex:none; }
  .tv-win.chat-open .tv-main { flex-direction:column-reverse; }
  .tv-win.chat-open .tv-left > #tvGrid, .tv-win.chat-open .tv-left > #tvErr { display:none; }
  .tv-win.chat-open .tv-chat { display:flex; }
}
@media (max-width: 900px) { .tv-win { top:92px; } }

/* Leave seat: a quiet outline button, never mistaken for a primary action */
.tp-btn.tp-leave, .w-card .mctl .tp-btn.tp-leave { border-color:#6b6359; color:#2a2420; background:transparent; }
.tp-btn.tp-leave:hover, .w-card .mctl .tp-btn.tp-leave:hover { background:rgba(42, 36, 32, .07); }
#bTv { grid-column:auto; }
.w-card .mctl .mTv { grid-column:auto; }
@media (max-width: 600px) {
  #bTv { grid-column:span 2; font-size:12px; line-height:1.15; }
  #bLeave { grid-column:span 1; font-size:12px; line-height:1.15; }
  #tp.notable #bTv { grid-column:auto; }
  .tv-ctl .tp-leave { flex:1 1 calc(50% - 6px); }
}
@media (min-width: 601px) {
  #tpPeople .tile { width:80px; height:48px; font-size:16px; margin:0 0 2px; }
  #chatLog { max-height:84px; }
}

/* the table panel on desktop: camera tiles are one row of small thumbnails under the people list, and spacing is tight, so it fits without scrolling */
@media (min-width: 601px) {
  #tp { padding:12px 14px 10px; }
  #tp header { margin:0 0 4px; }
  #tp h2 { font-size:24px; }
  #tpPeople { margin:0 0 6px; gap:0; }
  #tpPeople .p { min-height:34px; padding:1px 0; grid-template-columns:28px 1fr 22px; gap:8px; }
  #tpPeople .av { width:28px; height:28px; font-size:11px; }
  #tpTiles { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; }
  #tpTiles:empty { display:none; }
  #tpTiles .tile { width:72px; height:46px; border-radius:7px; overflow:hidden; background:var(--c, #2a7a7f); display:grid; place-items:center; color:#fff; font:600 16px 'Cormorant Garamond', Georgia, serif; position:relative; }
  #tpTiles .tile video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
  .tp-ctl { gap:6px; padding-top:8px; margin:0 0 6px; }
  .tp-btn, .seg button { min-height:44px; }
  #chatWrap { padding-top:6px; }
  #chatLog { max-height:66px; margin-bottom:6px; }
}

/* video in the circle (owner, 2026-10-09): your camera cropped round, or the calm placeholder with a small camera badge */
.av, .seat { position:relative; }
.av video.face, .seat video.face { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; transform:scaleX(-1); background:#2a2420; }
.av.camon, .seat.taken.camon, .w-card .seat.taken.camon { background:linear-gradient(135deg, var(--c, #2a7a7f), color-mix(in srgb, var(--c, #2a7a7f) 55%, #2a2420)); }
.w-card .seat.taken.you.camon { background:#2a2420; }
.cbadge { position:absolute; top:-3px; right:-3px; width:15px; height:15px; border-radius:50%; background:#fbf6ec; color:#2a2420; box-shadow:0 0 0 1px rgba(42, 36, 32, .25); display:grid; place-items:center; z-index:2; }
.cbadge svg { width:9px; height:9px; }
.w-card .seat.taken.speaking { box-shadow:0 0 0 2px #fbf6ec, 0 0 0 4px #9a2a36; animation:tpPulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .w-card .seat.taken.speaking { animation:none; } }
#tpTiles { display:none !important; }

/* Room View: no panel, just a small pill at the bottom left */
#pill { position:fixed; left:16px; bottom:calc(env(safe-area-inset-bottom) + 16px); z-index:18; min-height:44px; padding:0 18px; border-radius:22px; background:var(--tp-cream); color:var(--tp-ink); border:1px solid rgba(154, 42, 54, .25); box-shadow:0 8px 24px rgba(42, 36, 32, .22); font:600 14px Inter, system-ui, sans-serif; cursor:pointer; white-space:nowrap; }
#pill[hidden] { display:none; }
#pill:hover { background:#fff; }
#pill:focus-visible { outline:3px solid var(--tp-garnet); outline-offset:2px; }
body.hud-open #pill, body.tv-open #pill { display:none; }
body[data-moving="1"] #pill { opacity:0; pointer-events:none; }
@media (max-width: 600px) { #pill { left:8px; bottom:calc(env(safe-area-inset-bottom) + 8px); max-width:calc(100vw - var(--jw) - clamp(8px, 2vw, 28px) - 8px - 16px); overflow:hidden; text-overflow:ellipsis; } }
.tv-ctl .tp-leave { min-width:0; }

/* Room View: the group pill and a separate outline Leave seat button, side by side at the bottom left */
#pillbar { position:fixed; left:16px; bottom:calc(env(safe-area-inset-bottom) + 16px); z-index:18; display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; }
#pillbar[hidden] { display:none; }
#pillbar #pill { position:static; }
#pillLeave { min-height:44px; padding:0 18px; border-radius:22px; background:var(--tp-cream); color:var(--tp-ink); border:1px solid #6b6359; box-shadow:0 8px 24px rgba(42, 36, 32, .18); font:600 14px Inter, system-ui, sans-serif; cursor:pointer; white-space:nowrap; }
#pillLeave:hover { background:#fff; }
#pillLeave:focus-visible { outline:3px solid var(--tp-ink); outline-offset:2px; }
body.hud-open #pillbar, body.tv-open #pillbar { display:none; }
body[data-moving="1"] #pillbar { opacity:0; pointer-events:none; }
@media (max-width: 600px) { #pillbar { left:8px; bottom:calc(env(safe-area-inset-bottom) + 8px); max-width:calc(100vw - var(--jw) - clamp(8px, 2vw, 28px) - 8px - 16px); } #pillbar #pill { max-width:100%; } }

/* desktop table panel: 44 px circles for everyone, 56 px when the camera is on, so the camera makes a visible difference */
@media (min-width: 601px) {
  #tp { max-height:calc(100dvh - 100px); padding:10px 14px 8px; }
  #tpPeople { margin:0 0 4px; gap:0; }
  #tpPeople .p { min-height:44px; padding:0; grid-template-columns:44px 1fr 22px; gap:10px; }
  #tpPeople .p.cam { min-height:56px; grid-template-columns:56px 1fr 22px; }
  #tpPeople .av { width:44px; height:44px; font-size:14px; }
  #tpPeople .p.cam .av { width:56px; height:56px; font-size:17px; }
  #tpPeople .cbadge { width:18px; height:18px; top:-2px; right:-2px; }
  #tpPeople .cbadge svg { width:11px; height:11px; }
  #tp header { margin:0 0 2px; }
  .tp-ctl { gap:5px; padding-top:6px; margin:0 0 4px; }
  #chatWrap { padding-top:5px; }
  #chatLog { max-height:54px; margin-bottom:5px; }
}

/* ---- the seat map at every width from 601 up: the card never exceeds the viewport, and the map reflows instead of scrolling sideways ---- */
@media (min-width: 601px) {
  #walk.mapwide { --cw:clamp(230px, calc(100vw - 400px), 430px); } /* leaves Jade's dialogue about 300 px on its left */
}
.w-card > .card { max-width:100%; overflow-x:hidden; }
.w-card .smap { container-type:inline-size; min-width:0; }
@container (max-width: 383px) {
  .slower { flex-wrap:wrap !important; }
  .w-card .pcol { grid-template-columns:repeat(2, auto); gap:4px 14px; }
  .w-card .pairs { width:100%; }
}
@container (max-width: 283px) {
  .w-card .tblock { grid-template-columns:1fr; justify-items:center; }
  .w-card .tblock .sgroup { width:100%; }
  .w-card .pcol { grid-template-columns:1fr; justify-items:start; }
  .w-card .mctl { grid-template-columns:1fr; }
  .w-card .merr, .w-card .mlog, .w-card .mform { grid-column:1; }
}
.w-card .smap { grid-template-columns:minmax(0, 1fr); }
.w-card .smap .mctl { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.w-card .smap .mform input { width:0; }
@container (max-width: 283px) { .w-card .smap .mctl { grid-template-columns:minmax(0, 1fr); } }

/* every room's seats (owner, 2026-10-09): before you sit, taken seats are unnamed and the panel shows only how many are here */
.w-card .seat.taken.anon { background:#b9ad9c; color:transparent; box-shadow:0 0 0 2px #fbf6ec; cursor:default; }
.w-card .smap .herecount { display:flex; align-items:baseline; justify-content:space-between; margin:0 0 8px; padding:4px 10px 8px; border-bottom:1px solid rgba(154, 42, 54, .2); font:500 14px Inter, sans-serif; color:#2a2420; }
.w-card .smap .herecount b { font:600 20px Inter, sans-serif; color:#9a2a36; }


/* ---- the live lounge additions (not in the prototype): a name-card link styled as its button, a Club card's mute-for-me / report, a server message above the map ---- */
.w-card a.cta.sitwith { display:flex; align-items:center; justify-content:center; text-decoration:none; box-sizing:border-box; }
.w-card .smap > .merr { margin:0; font-size:12.5px; color:#6b6359; }
.w-card .clubcard .cc-acts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.w-card .clubcard .cc-acts .tp-btn { position:static; min-height:44px; padding:6px 10px; border:1px solid #9a2a36; border-radius:10px; background:transparent; color:#9a2a36; font:600 14px Inter, sans-serif; cursor:pointer; }
.w-card .clubcard .cc-acts .tp-btn[aria-pressed="true"] { background:#9a2a36; color:#fff; }
.w-card .clubcard .cc-acts .tp-btn.tp-leave, .w-card .clubcard .cc-report .tp-btn.tp-leave { border-color:#6b6359; color:#2a2420; background:transparent; }
.w-card .clubcard .cc-report { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.w-card .clubcard .cc-report[hidden] { display:none; }
.w-card .clubcard .cc-report textarea { grid-column:1 / 3; box-sizing:border-box; width:100%; min-height:72px; padding:8px 12px; border:1px solid rgba(42, 36, 32, .3); border-radius:10px; background:#fff; color:#2a2420; font:14px Inter, sans-serif; resize:vertical; }
.w-card .clubcard .cc-report .tp-btn { position:static; min-height:44px; padding:6px 10px; border:1px solid #9a2a36; border-radius:10px; font:600 14px Inter, sans-serif; cursor:pointer; }
.w-card .clubcard .cc-report .tp-btn.on { background:#9a2a36; color:#fff; }
.w-card .clubcard .cc-acts .tp-btn:focus-visible, .w-card .clubcard .cc-report .tp-btn:focus-visible, .w-card .clubcard .cc-report textarea:focus-visible { outline:3px solid #2a2420; outline-offset:2px; }
.w-card .clubcard .merr { margin:8px 0 0; font-size:12.5px; color:#6b6359; }
.w-card .clubcard .merr:empty { display:none; }