:root {
  --bg: #0b0d10;
  --panel: #13171c;
  --panel-2: #181d23;
  --panel-3: #20262d;
  --border: #2c343e;
  --border-soft: #222930;
  --text: #f4f6f8;
  --muted: #98a3ae;
  --faint: #697480;
  --accent: #9c7cff;
  --accent-2: #6f52d9;
  --accent-soft: rgba(156, 124, 255, .13);
  --success: #55c991;
  --warning: #e6b85c;
  --danger: #eb6b76;
  --info: #70a7ff;
  --shadow: 0 18px 48px rgba(0,0,0,.28);
  --radius: 14px;
  --radius-sm: 9px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-height: 100vh; }
a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.hidden { display: none !important; }
.mobile-only { display: none; }

.login-page {
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(156,124,255,.16), transparent 34rem),
    radial-gradient(circle at 90% 90%, rgba(73,108,171,.12), transparent 35rem),
    var(--bg);
}

.login-card {
  width: min(440px, 100%);
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(19,23,28,.96);
  box-shadow: var(--shadow);
}

.brand { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 11px; font-weight: 800; letter-spacing: -.04em;
  background: linear-gradient(145deg, var(--accent), #5d45be);
  color: white; box-shadow: 0 9px 24px rgba(95,68,190,.3);
}
.brand strong, .brand span { display: block; }
.brand strong { font-size: 15px; letter-spacing: -.01em; }
.brand span { color: var(--muted); font-size: 12px; margin-top: 2px; }
.brand-login { margin-bottom: 42px; }
.login-copy h1 { font-size: 30px; margin: 5px 0 8px; letter-spacing: -.04em; }
.login-copy p:last-child { color: var(--muted); margin: 0 0 26px; }
.login-footer { color: var(--faint); font-size: 12px; text-align: center; margin-top: 28px; }

.eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: 10px; color: var(--accent); font-weight: 750; margin: 0 0 5px; }
.stack { display: grid; gap: 16px; }
label > span, .field-label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 7px; font-weight: 650; }
input, select {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background-color: #0f1317; color: var(--text); padding: 11px 12px; outline: none;
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a3ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: right 11px center;
}
select:disabled { opacity: .68; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(156,124,255,.12); }

.button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  vertical-align: middle;
  line-height: 1.1;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 14px;
  background: var(--panel-3); color: var(--text); font-weight: 700; font-size: 13px;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.button:hover:not(:disabled) { border-color: #46515e; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button.primary { background: var(--accent-2); border-color: var(--accent-2); color: white; }
.button.primary:hover:not(:disabled) { background: #7b5ee5; }
.button.danger { color: #ffdfe2; border-color: rgba(235,107,118,.42); background: rgba(235,107,118,.09); }
.button.warning { color: #ffe5ae; border-color: rgba(230,184,92,.42); background: rgba(230,184,92,.08); }
.button.ghost { background: transparent; }
.button.small { min-height: 32px; padding: 0 10px; font-size: 12px; }
.button.full { width: 100%; }
.button-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.notice { border: 1px solid var(--border); padding: 11px 13px; border-radius: var(--radius-sm); font-size: 13px; }
.notice.error { color: #ffdadd; background: rgba(235,107,118,.09); border-color: rgba(235,107,118,.35); }
.notice.info { color: #d8e7ff; background: rgba(112,167,255,.08); border-color: rgba(112,167,255,.3); }
.notice.warning { color: #ffe6b3; background: rgba(230,184,92,.08); border-color: rgba(230,184,92,.3); }

.app-layout { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0,1fr); transition: grid-template-columns .18s ease; }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 22px 16px 18px;
  border-right: 1px solid var(--border-soft); background: #0e1115;
  display: flex; flex-direction: column; gap: 18px; z-index: 20; overflow: hidden;
  transition: padding .18s ease;
}
.sidebar .brand { padding: 0 8px; min-height: 38px; }
.sidebar-label { min-width: 0; }
.sidebar-collapse-button {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border: 1px solid transparent;
  border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; text-align: left;
}
.sidebar-collapse-button:hover { color: var(--text); background: var(--panel-2); border-color: var(--border-soft); }
.sidebar-collapse-icon { display: inline-grid; place-items: center; width: 18px; min-width: 18px; font-size: 18px; line-height: 1; }
.main-nav { display: grid; gap: 4px; }
.main-nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 9px;
  text-decoration: none; color: #c2cad2; font-size: 13px; font-weight: 650; white-space: nowrap;
}
.main-nav a:hover { background: var(--panel-2); color: white; }
.main-nav a.active { background: var(--accent-soft); color: #ddd3ff; }
.nav-icon { width: 18px; min-width: 18px; color: var(--muted); text-align: center; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 12px; }
.identity { display: flex; align-items: center; gap: 10px; padding: 11px 8px; border-top: 1px solid var(--border-soft); }
.identity strong, .identity span { display: block; }
.identity strong { font-size: 13px; }
.identity div span { color: var(--muted); font-size: 11px; margin-top: 2px; }
.avatar { width: 34px; min-width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--panel-3); color: #d7dce1; }
.sidebar-logout { display: flex; align-items: center; justify-content: center; gap: 8px; }
.logout-icon { display: inline-grid; place-items: center; width: 18px; min-width: 18px; }

body.sidebar-collapsed .app-layout { grid-template-columns: 68px minmax(0,1fr); }
body.sidebar-collapsed .sidebar { padding-left: 8px; padding-right: 8px; }
body.sidebar-collapsed .sidebar .sidebar-label { display: none; }
body.sidebar-collapsed .sidebar .brand,
body.sidebar-collapsed .sidebar .main-nav a,
body.sidebar-collapsed .sidebar .sidebar-collapse-button,
body.sidebar-collapsed .sidebar .identity,
body.sidebar-collapsed .sidebar .sidebar-logout { justify-content: center; padding-left: 8px; padding-right: 8px; }
body.sidebar-collapsed .sidebar .brand-mark { margin: 0; }
body.sidebar-collapsed .sidebar .nav-icon { width: 22px; min-width: 22px; font-size: 16px; }
body.sidebar-collapsed .sidebar .sidebar-collapse-icon { transform: rotate(180deg); }
body.sidebar-collapsed .sidebar .identity { border-top-color: var(--border-soft); }
body.sidebar-collapsed .sidebar .sidebar-logout { width: 100%; }

.content-shell { min-width: 0; }
/* v0.9.14: desktop uses the sidebar as the sole global navigation.
   A compact shell bar exists only on narrow/mobile layouts so the drawer
   remains reachable without sacrificing notebook vertical space. */
.mobile-shell-bar { display: none; }
.sidebar-realtime {
  display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 8px;
  color: var(--faint); font-size: 11px; font-weight: 700;
}
.sidebar-realtime-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 3px rgba(105,116,128,.08); }
.sidebar-realtime.success { color: var(--success); }
.sidebar-realtime.success .sidebar-realtime-dot { background: var(--success); box-shadow: 0 0 0 3px rgba(85,201,145,.10); }
.sidebar-realtime.warning { color: var(--warning); }
.sidebar-realtime.warning .sidebar-realtime-dot { background: var(--warning); box-shadow: 0 0 0 3px rgba(230,184,92,.10); }
body.sidebar-collapsed .sidebar-realtime { justify-content: center; padding-left: 0; padding-right: 0; }
.icon-button { display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 9px; width: 38px; min-width: 38px; height: 38px; padding: 0; line-height: 1; }
.button.small.icon-button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; }
.page-content { padding: 20px 28px 48px; max-width: 1500px; margin: 0 auto; }
.loading-card { color: var(--muted); padding: 30px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); }

.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px; }
.card h2, .card h3 { margin-top: 0; letter-spacing: -.02em; }
.card h2 { font-size: 17px; }
.card h3 { font-size: 14px; }
.card p { color: var(--muted); }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.card-header h2, .card-header h3 { margin: 0; }
.card-header p { margin: 4px 0 0; font-size: 12px; }
.stat { padding: 18px; min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; }
.stat-value { font-size: 34px; letter-spacing: -.06em; font-weight: 780; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 650; }
.stat-note { color: var(--faint); font-size: 11px; }
.section { margin-top: 22px; }
.section:first-child { margin-top: 0; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.section-title h2 { margin: 0; font-size: 16px; }
.section-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.page-local-title { align-items: center; margin-bottom: 14px; }

.badge { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 99px; padding: 4px 8px; font-size: 10px; font-weight: 750; color: #c9d1d8; background: var(--panel-2); white-space: nowrap; }
.badge.success { color: #bdf6d9; border-color: rgba(85,201,145,.35); background: rgba(85,201,145,.08); }
.badge.warning { color: #ffe3a6; border-color: rgba(230,184,92,.32); background: rgba(230,184,92,.08); }
.badge.accent { color: #e0d8ff; border-color: rgba(156,124,255,.35); background: rgba(156,124,255,.1); }
.badge.danger { color: #ffdadd; border-color: rgba(235,107,118,.35); background: rgba(235,107,118,.08); }

.list { display: grid; gap: 8px; }
.list-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 13px; border: 1px solid var(--border-soft); border-radius: 10px; background: #101419; }
.list-item strong { font-size: 13px; }
.list-item p { margin: 3px 0 0; font-size: 11px; color: var(--muted); }
.list-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.room-list-main-link { flex: 1 1 auto; min-width: 0; text-decoration: none; }
.room-list-diagnostics { flex: 0 0 auto; }
.empty { padding: 26px; border: 1px dashed var(--border); border-radius: 11px; color: var(--muted); text-align: center; font-size: 13px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 11px; }
table { border-collapse: collapse; width: 100%; min-width: 680px; }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); font-size: 12px; vertical-align: middle; }
th { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; background: #11151a; }
tr:last-child td { border-bottom: 0; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.checkbox-row { display: flex; flex-wrap: wrap; gap: 12px; }
.checkbox { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.checkbox input { width: auto; }
.inline-form { display: flex; gap: 8px; align-items: end; }
.inline-form > label { flex: 1; }

.room-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.room-hero h2 { font-size: 25px; margin: 0 0 7px; letter-spacing: -.04em; }
.room-meta { display: flex; gap: 7px; flex-wrap: wrap; }

.game-layout { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0,1fr); gap: 16px; }
.game-list .list-item { align-items: flex-start; }
.game-list .list-item.selected { border-color: rgba(156,124,255,.48); background: rgba(156,124,255,.07); }
.board-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-items: start; }
.board-tile { min-height: 170px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(145deg,#151a20,#101419); padding: 14px; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; }
.board-tile.unassigned { border-style: dashed; opacity: .75; }
.board-number { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.board-player { font-size: 18px; font-weight: 760; letter-spacing: -.03em; }
.board-video-placeholder { min-height: 76px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 7px; color: var(--faint); font-size: 11px; border: 1px dashed var(--border); border-radius: 8px; margin-top: 12px; padding: 10px; }
.board-video-placeholder strong { color: var(--text); font-size: 11px; }
.video-source-control { display: grid; gap: 5px; margin-top: 2px; }
.video-source-control select { width: 100%; }
.assignment-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.assignment-control { border: 1px solid var(--border-soft); border-radius: 9px; padding: 10px; background: #101419; }
.assignment-control .person { margin-bottom: 7px; }
.assignment-control .person strong { display: block; font-size: 12px; }
.assignment-control .person span { color: var(--muted); font-size: 10px; }
.suggestion-list { display: flex; gap: 7px; flex-wrap: wrap; }

.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 8px; width: min(380px, calc(100vw - 36px)); }
.toast { border: 1px solid var(--border); border-radius: 11px; background: #191e24; box-shadow: var(--shadow); padding: 12px 14px; font-size: 12px; animation: toast-in .18s ease-out; }
.toast.error { border-color: rgba(235,107,118,.42); }
.toast.success { border-color: rgba(85,201,145,.42); }
@keyframes toast-in { from { transform: translateY(6px); opacity: 0; } }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.66); z-index: 80; display: grid; place-items: center; padding: 20px; }
.modal { width: min(520px,100%); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); padding: 20px; }
.modal h2 { margin: 0 0 8px; font-size: 18px; }
.modal p { color: var(--muted); font-size: 12px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

@media (max-width: 1050px) {
  .grid.four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid.three { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .game-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .mobile-only { display: inline-grid; place-items: center; }
  .app-layout, body.sidebar-collapsed .app-layout { grid-template-columns: 1fr; }
  .sidebar, body.sidebar-collapsed .sidebar { position: fixed; transform: translateX(-105%); transition: transform .18s ease; width: 250px; padding: 22px 16px 18px; box-shadow: var(--shadow); }
  body.sidebar-collapsed .sidebar .sidebar-label { display: block; }
  body.sidebar-collapsed .sidebar .brand, body.sidebar-collapsed .sidebar .main-nav a, body.sidebar-collapsed .sidebar .identity { justify-content: flex-start; }
  .sidebar-collapse-button { display: none; }
  .sidebar.open { transform: translateX(0); }
  .mobile-shell-bar {
    min-height: 46px; height: 46px; padding: 4px 10px; display: flex; align-items: center; gap: 9px;
    border-bottom: 1px solid var(--border-soft); background: rgba(11,13,16,.94); backdrop-filter: blur(12px);
    position: sticky; top: 0; z-index: 15;
  }
  .mobile-shell-bar .icon-button { width: 36px; min-width: 36px; height: 36px; }
  .mobile-shell-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dce2e8; font-size: 13px; font-weight: 750; }
  .page-content { padding: 16px 14px 38px; }
  .grid.two, .grid.three, .grid.four, .board-grid, .assignment-grid, .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .room-hero { flex-direction: column; }
  .inline-form { flex-direction: column; align-items: stretch; }
}

/* Device v0.3.0 – first P2P WebRTC board video path */
.board-video-stage { position: relative; overflow: hidden; min-height: 180px; margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; background: #050608; }
.board-video-stage video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #050608; }
.board-video-status { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 4px 7px; border-radius: 999px; background: rgba(12,15,18,.82); border: 1px solid var(--border); font-size: 10px; color: var(--faint); backdrop-filter: blur(6px); }
.board-video-status.success { color: var(--success); }
.board-video-status.warning { color: var(--warning); }
.board-video-status.danger { color: var(--danger); }
.board-video-status.muted { color: var(--faint); }
.board-video-meta { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 10px; color: var(--faint); border-top: 1px solid var(--border); }
.board-video-meta strong { color: var(--text); }
.board-video-stage .video-source-control { padding: 0 10px 10px; }


/* Board video inspection: click opens a large pinned overlay;
   click pins the same MediaStream without opening a second WebRTC peer. */
.board-video-stage video { cursor: zoom-in; }
.board-video-hint { position: absolute; left: 8px; bottom: 54px; z-index: 2; padding: 4px 7px; border-radius: 7px; background: rgba(12,15,18,.72); color: var(--faint); font-size: 9px; opacity: 0; transition: opacity .16s ease; pointer-events: none; }
.board-video-stage video:hover + .board-video-hint { opacity: 1; }
.video-preview-overlay { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 24px; pointer-events: none; background: transparent; }
.video-preview-overlay.hidden { display: none; }
.video-preview-overlay.pinned { z-index: 95; pointer-events: auto; background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.video-preview-shell { width: min(92vw, 1500px); max-height: 92vh; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: #050608; box-shadow: 0 22px 70px rgba(0,0,0,.7); }
.video-preview-shell video { display: block; width: 100%; max-height: calc(92vh - 48px); aspect-ratio: 16 / 9; object-fit: contain; background: #050608; }
.video-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 11px; }

@media (max-width: 700px) {
  .video-preview-overlay { padding: 8px; }
  .video-preview-shell { width: 100%; max-height: 96vh; }
  .board-video-hint { display: none; }
}

/* v0.8.3 room workspace: game first, room administration collapsible. */
.room-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.room-workspace.collapsed { grid-template-columns: 54px minmax(0, 1fr); }
.room-members-panel { min-width: 0; transition: width .16s ease; }
.room-members-header { align-items: flex-start; gap: 8px; }
.room-members-toggle { flex: 0 0 auto; min-width: 34px; font-size: 18px; line-height: 1; }
.room-workspace.collapsed .room-members-panel { padding: 10px 8px; }
.room-workspace.collapsed .room-members-heading,
.room-workspace.collapsed .room-members-body { display: none; }
.room-workspace.collapsed .room-members-header { justify-content: center; margin: 0; }
.room-game-panel { min-width: 0; }

/* Media roles stay visible; board is primary, face/scanner are compact assistants. */
.media-role-section { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.media-role-section-title { margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.media-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.media-role-card { min-width: 0; }
.media-role-card .board-video-stage { min-height: 120px; margin-top: 0; }
.media-role-card .board-video-placeholder { min-height: 94px; margin-top: 0; }
.media-role-card .board-video-meta { display: grid; gap: 3px; }
.media-role-card .board-video-hint { display: none; }
.media-role-card .board-video-stage video { aspect-ratio: 16 / 10; }
.browser-media-check { width: min(720px, 100%); }
.camera-settings-dialog { width:min(980px,100%); }
.camera-settings-tabs { display:flex; gap:8px; margin:10px 0 16px; padding:4px; width:max-content; max-width:100%; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.025); }
.camera-settings-tab { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:7px 12px; border:0; border-radius:9px; background:transparent; color:var(--muted); font:inherit; font-weight:700; cursor:pointer; }
.camera-settings-tab:hover:not(:disabled) { background:rgba(255,255,255,.055); color:var(--text); }
.camera-settings-tab.active { background:rgba(255,255,255,.09); color:var(--text); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.camera-settings-tab:disabled { opacity:.35; cursor:not-allowed; }
.camera-calibration-profile-hint { margin:0 0 12px; padding:9px 11px; border:1px solid var(--border); border-radius:10px; color:var(--muted); font-size:11px; background:rgba(255,255,255,.025); }
.camera-settings-source-card { display:flex; align-items:center; gap:12px; margin:14px 0; padding:14px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.025); }
.camera-settings-source-card > span:last-child { display:grid; gap:3px; min-width:0; }
.camera-settings-source-card small { color:var(--muted); overflow-wrap:anywhere; }
.browser-media-check video { display: block; width: 100%; max-height: 55vh; margin-top: 12px; background: #000; border-radius: 12px; object-fit: contain; }
.browser-camera-device-row { display: grid; gap: 6px; margin-top: 12px; }
.browser-camera-picker-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; margin-bottom:7px; }
.browser-camera-device-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:7px; margin-bottom:11px; max-height:230px; overflow:auto; }
.browser-camera-device-card { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr) 22px; align-items:center; gap:8px; min-width:0; padding:9px 10px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.025); color:var(--text); text-align:left; cursor:pointer; }
.browser-camera-device-card:hover:not(:disabled) { border-color:rgba(156,124,255,.42); background:rgba(156,124,255,.06); }
.browser-camera-device-card.selected { border-color:rgba(126,196,255,.55); background:rgba(89,168,255,.09); }
.browser-camera-device-card:disabled { opacity:.5; cursor:not-allowed; }
.browser-camera-device-card strong,.browser-camera-device-card small { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.browser-camera-device-card small { margin-top:2px; color:var(--muted); font-size:10px; }
.browser-camera-device-icon,.browser-camera-selected { display:grid; place-items:center; }
.browser-camera-device-icon .ui-icon,.browser-camera-selected .ui-icon { width:16px; height:16px; }

@media (max-width: 1500px) {
  .room-workspace:not(.collapsed) { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
  .game-layout { grid-template-columns: minmax(190px, 230px) minmax(0,1fr); }
}

@media (max-width: 1100px) {
  .room-workspace,
  .room-workspace.collapsed { grid-template-columns: 1fr; }
  .room-workspace.collapsed .room-members-panel { padding: 12px; }
  .room-workspace.collapsed .room-members-heading { display: block; }
  .room-workspace.collapsed .room-members-header { justify-content: space-between; }
  .room-workspace.collapsed .room-members-body { display: none; }
}

@media (max-width: 760px) {
  .media-role-grid { grid-template-columns: 1fr; }
}

/* v0.8.4 transient privacy pause */
.board-tile { position: relative; }
.privacy-banner {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 7;
  padding: 9px 12px;
  border-radius: 10px 10px 0 0;
  background: rgba(16, 20, 28, .92);
  backdrop-filter: blur(6px);
  font-weight: 700;
  text-align: center;
}
.board-tile.privacy-paused .board-video-stage video { opacity: .16; filter: grayscale(1); }
.board-tile.privacy-paused .board-video-hint { display: none; }
.board-tile.privacy-paused .board-video-status { font-weight: 700; }
.board-tile.privacy-paused .game-board-marker-layer { display:none; }

.voice-card {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: .55rem;
  align-items: stretch;
  padding: .7rem .75rem;
  margin: 0;
  border: 1px solid var(--border, #d7dce3);
  border-radius: .75rem;
  background: var(--surface-soft, rgba(127,127,127,.05));
  min-width: 0;
}
.voice-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; }
.voice-head > strong { flex: 0 0 auto; }
.voice-mute-action { flex: 0 0 auto; min-width: 0; }
.voice-mute-compact { display: none; }
.voice-meta { display: grid; grid-template-columns: minmax(0,1fr) minmax(110px,.45fr); gap: .75rem; align-items: center; min-width: 0; }
.voice-source-stack { display: flex; align-items: center; gap: .45rem; min-width: 0; flex-wrap: wrap; }
.voice-source-label { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--text-muted, #667085); }
.voice-status-indicator {
  position: static;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--warning);
  cursor: help;
}
.voice-status-indicator[hidden] { display: none !important; }
.voice-status-indicator.warning { color: var(--warning); }
.voice-status-indicator.danger { color: var(--danger); }
.voice-status-indicator .ui-icon { width: 14px; height: 14px; }
.voice-level { display: grid; grid-template-columns: auto minmax(70px,1fr); gap: .45rem; align-items: center; min-width: 0; color: var(--faint); font-size: 9px; }
.voice-level meter { width: 100%; min-width: 70px; height: .8rem; }
.voice-level-empty { opacity: .45; }
.voice-source-control { min-width: 0; width: 100%; }
.voice-source-select { display: block; width: 100%; min-width: 0; max-width: 100%; }
.voice-card audio { width: 0; height: 0; opacity: 0; pointer-events: none; position: absolute; }
.audio-meter-wrap { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center; margin: .8rem 0; }
.audio-meter-wrap meter { width: 100%; min-height: 1.1rem; }
@media (max-width: 760px) {
  .voice-meta { grid-template-columns: 1fr; }
  .voice-head { align-items: flex-start; }
  .voice-mute-action .button { white-space: nowrap; }
}

/* v0.8.9 stable board workspace: media sections keep their own flow. */
.board-tile > .board-video-stage, .board-tile > .board-video-placeholder { margin-top: 0; }
.board-tile .media-role-section { margin-top: 0; }
.board-tile .board-video-status { max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* v0.9.0 M5.1 Board focus / player-aware game layout. */
.board-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.board-grid.has-own-board .board-tile.own-board { grid-column: 1 / -1; order: 20; }
.board-grid.has-own-board.players-2 .board-tile.opponent-board,
.board-grid.has-own-board.players-3 .board-tile.opponent-board { order: 10; }
.board-grid.has-own-board.players-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.board-grid.has-own-board.players-4 .board-tile.opponent-board { order: 10; }
.board-grid.spectator-layout.players-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.board-grid.spectator-layout.players-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.board-grid.has-own-board .board-tile.own-board > .board-video-stage video { max-height: 58vh; }
.board-grid.has-own-board .board-tile.own-board { border-color: rgba(156,124,255,.42); box-shadow: 0 0 0 1px rgba(156,124,255,.08); }
.board-grid.has-own-board .board-tile.own-board .board-player::after { content: ' · Du'; color: var(--faint); font-size: 11px; font-weight: 650; letter-spacing: 0; }
@media (max-width: 1280px) {
  .board-grid.has-own-board.players-4,
  .board-grid.spectator-layout.players-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .board-grid.has-own-board.players-4,
  .board-grid.spectator-layout.players-3,
  .board-grid.spectator-layout.players-4 { grid-template-columns: 1fr; }
  .board-tile-head { align-items: center; }
}

/* v0.9.2 immersive Game View: maximize board space without losing a way back to normal navigation. */
.game-view-toolbar {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 7px 8px 7px 11px;
  border: 1px solid rgba(156,124,255,.28);
  border-radius: 12px;
  background: rgba(12,15,18,.88);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}
.game-view-toolbar-title {
  min-width: 0;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
body.game-view-active { overflow-x: hidden; }
body.game-view-active .app-layout { grid-template-columns: minmax(0, 1fr); }
body.game-view-active .sidebar,
body.game-view-active .mobile-shell-bar,
body.game-view-active .room-hero,
body.game-view-active .room-members-panel { display: none; }
body.game-view-active .content-shell { width: 100%; min-width: 0; }
body.game-view-active .page-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px 10px 24px;
}
body.game-view-active .room-workspace,
body.game-view-active .room-workspace.collapsed { display: block; }
body.game-view-active .room-game-panel {
  min-height: calc(100vh - 16px);
  padding: 50px 8px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.game-view-active .room-game-panel > .card-header { display: none; }
body.game-view-active .game-layout { display: block; }
body.game-view-active .game-list { display: none; }
body.game-view-active .board-grid { gap: 10px; }
body.game-view-active .board-tile { padding: 10px; gap: 8px; }
body.game-view-active .board-grid.has-own-board.players-2 .board-tile.opponent-board { grid-column: 1 / -1; }
body.game-view-active .board-grid.has-own-board .board-tile.own-board > .board-video-stage video { max-height: 54vh; }
body.game-view-active .board-grid.has-own-board .board-tile.opponent-board > .board-video-stage video { max-height: 31vh; }
body.game-view-active .voice-card { padding: .5rem .6rem; gap: .4rem; }
body.game-view-active .media-role-section { margin-top: 4px; padding-top: 8px; }
body.game-view-active .media-role-card .board-video-stage video { max-height: 18vh; }

@media (max-width: 760px) {
  .game-view-toolbar { left: 8px; right: 8px; top: 8px; justify-content: space-between; }
  .game-view-toolbar-title { display: none; }
  .game-view-toolbar .button-row { width: 100%; justify-content: flex-end; }
  body.game-view-active .page-content { padding: 6px 6px 18px; }
  body.game-view-active .room-game-panel { padding: 50px 2px 10px; }
}


/* v0.9.2 compact in-game media HUD: the Game View is for play, not source setup. */
body.game-view-active .board-tile {
  padding: 7px;
  gap: 5px;
  overflow: visible;
}
body.game-view-active .board-tile-head {
  min-height: 42px;
  align-items: center;
  padding: 0 2px;
}
body.game-view-active .board-tile.has-facecam .board-tile-head { padding-left: 56px; }
body.game-view-active .board-number,
body.game-view-active .board-tile-head .stat-note { display: none; }
body.game-view-active .board-player { font-size: 15px; line-height: 1.1; }

/* Keep only the board video itself in the play surface; setup controls stay in normal Room view. */
body.game-view-active .board-tile > .board-video-stage > .board-video-meta,
body.game-view-active .board-tile > .board-video-stage > .board-video-hint,
body.game-view-active .board-tile > .board-video-stage > .video-source-control,
body.game-view-active .board-tile > .board-video-stage > [data-media-pause-toggle],
body.game-view-active .board-tile > .board-video-stage > [data-browser-camera-enable],
body.game-view-active .board-tile > .board-video-stage > [data-video-unbind] { display: none; }
body.game-view-active .board-tile > .board-video-stage .board-video-status.success { display: none; }
body.game-view-active .board-tile > .board-video-stage { margin-top: 0; }

/* Voice collapses to a tiny level meter plus an optional one-icon mute action. */
body.game-view-active .voice-card {
  display: flex;
  width: fit-content;
  max-width: 150px;
  min-height: 18px;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.game-view-active .voice-card.voice-card-empty { display: none; }
body.game-view-active .voice-head { order: 2; display: block; }
body.game-view-active .voice-head > strong,
body.game-view-active .voice-source-stack,
body.game-view-active .voice-source-control { display: none; }
body.game-view-active .voice-meta { order: 1; display: block; }
body.game-view-active .voice-level { display: block; width: 74px; line-height: 0; }
body.game-view-active .voice-level > span { display: none; }
body.game-view-active .voice-level meter { width: 74px; min-width: 0; height: 7px; vertical-align: middle; }
body.game-view-active .voice-mute-action { display: block; }
body.game-view-active .voice-mute-action .button {
  display: inline-grid;
  width: 23px;
  height: 23px;
  min-width: 23px;
  padding: 0;
  place-items: center;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
}
body.game-view-active .voice-mute-full { display: none; }
body.game-view-active .voice-mute-compact { display: inline; }

body.game-view-active .board-grid.has-own-board .board-tile.own-board > .board-video-stage video { max-height: 57vh; }
body.game-view-active .board-grid.has-own-board .board-tile.opponent-board > .board-video-stage video { max-height: 32vh; }

@media (max-width: 760px) {
  body.game-view-active .board-tile.has-facecam .board-tile-head { padding-left: 48px; }
  body.game-view-active .media-role-card[data-media-role-card="face"],
  body.game-view-active .media-role-card[data-media-role-card="face"] .board-video-stage,
  body.game-view-active .media-role-card[data-media-role-card="face"] video {
    width: 40px;
    height: 40px;
  }
  body.game-view-active .voice-level,
  body.game-view-active .voice-level meter { width: 58px; }
}

/* v0.9.3 Room-scoped media settings: configuration stays out of the play surface. */
.room-media-settings { margin-bottom: 20px; }
.room-media-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.room-settings-block { min-width: 0; padding: 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: #101419; }
.room-settings-block + .room-settings-block { margin-top: 0; }
.mix-value { color: var(--muted); font-size: 10px; text-align: right; white-space: nowrap; }
.room-audio-sinks { display: none; }
.empty.compact { padding: 14px; }
.game-layout.current-game-only { display: block; }

/* Player HUD: only identity, level and immediate mute actions live beside the board. */
.board-player-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.voice-hud { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.voice-hud meter { width: 70px; min-width: 48px; height: 7px; }
.voice-hud .voice-hud-button { width: 25px; height: 25px; min-width: 25px; border-radius: 999px; font-size: 11px; }
.voice-self-muted { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--warning); font-size: 11px; }
.voice-self-muted[hidden] { display: none; }

/* In immersive play mode, Room settings are deliberately absent; the gear returns to them. */
body.game-view-active .room-media-settings { display: none; }
body.game-view-active .board-player-line { gap: 5px; flex-wrap: nowrap; }
body.game-view-active .voice-hud meter { width: 58px; min-width: 42px; }
body.game-view-active .voice-hud .voice-hud-button { width: 23px; height: 23px; min-width: 23px; }
body.game-view-active .voice-self-muted { width: 18px; height: 18px; }
body.game-view-active .game-view-toolbar .icon-button { width: 32px; height: 32px; min-width: 32px; }

@media (max-width: 900px) {
  .room-media-settings-grid { grid-template-columns: 1fr; }
  .room-media-row { grid-template-columns: minmax(120px, .7fr) minmax(160px, 1.3fr) auto; }
}

@media (max-width: 620px) {
  .room-media-row { grid-template-columns: minmax(0, 1fr) auto; }
  .room-media-row-title { grid-column: 1 / -1; }
  .room-media-row select { grid-column: 1; }
  .room-media-row-actions { grid-column: 2; }
  .room-audio-own-row { grid-template-columns: 1fr auto auto; }
  .room-audio-own-row select { grid-column: 1 / -1; }
  .browser-audio-options { grid-template-columns: 1fr; }
  .browser-audio-options .gain-setting { grid-column: 1; grid-template-columns: 72px minmax(100px, 1fr) 50px; }
  .voice-hud meter { width: 54px; }
}

/* v0.9.6 Room hierarchy: configuration is compact, game is the visual focus. */
.room-accordion-header {
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  cursor: pointer;
}
.room-accordion-header > div { min-width: 0; }
.room-accordion-header h2 { margin: 0; }
.room-accordion-header p { margin: 4px 0 0; color: var(--muted); }
.room-accordion-chevron { flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border-soft); color: var(--muted); transform: rotate(180deg); transition: transform .16s ease; }
.collapsed > .room-accordion-header .room-accordion-chevron { transform: rotate(0deg); }

.room-media-settings { display: grid; gap: 12px; }
.room-media-settings.collapsed .room-media-settings-body { display: none; }
.room-media-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.room-media-summary-items { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.media-summary-chip { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 8px; border: 1px solid var(--border-soft); border-radius: 999px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 10px; }
.media-summary-chip strong { color: var(--text); font-size: 10px; }
.media-summary-chip.success { border-color: color-mix(in srgb, var(--success) 35%, var(--border-soft)); }
.media-summary-chip.warning { border-color: color-mix(in srgb, var(--warning) 45%, var(--border-soft)); color: var(--warning); }
.media-summary-chip.accent { border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft)); color: var(--accent); }
.media-summary-chip.muted { opacity: .78; }
.compact-notice { margin-top: 9px; padding: 8px 10px; font-size: 11px; }

.room-game-panel { width: 100%; min-width: 0; margin-bottom: 20px; }
.room-members-panel { width: 100%; min-width: 0; margin-bottom: 20px; }
.room-members-panel.collapsed .room-members-body { display: none; }
.room-members-panel .room-members-header { margin: 0; }
.room-members-panel .room-members-body { margin-top: 14px; }
.room-members-panel.collapsed { padding: 16px 18px; }
.room-members-panel.collapsed .room-members-heading { display: block; }

.room-invite-modal { width: min(680px, calc(100vw - 32px)); }
.room-invite-modal .card-header { align-items: flex-start; }
.room-invite-form { margin-top: 14px; }
.room-invite-list { margin-top: 18px; }

.game-boards-section { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(255,255,255,.018); }
.game-boards-section.collapsed .game-boards-body { display: none; }
.game-boards-body { margin-top: 14px; }
.game-boards-header h2 { font-size: 14px; }
.game-boards-header p { font-size: 11px; }
.warning-text { color: var(--warning) !important; }
.compact-game-board-extra { margin-top: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 11px; }
.assignment-summary-list { display: flex; flex-wrap: wrap; gap: 7px; }
.game-primary-actions { margin-top: 16px; }

/* Immersive Game View is presentation only; setup/configuration stays out. */
body.game-view-active .game-boards-section { display: none; }

@media (max-width: 760px) {
  .room-media-summary { align-items: flex-start; flex-direction: column; }
  .room-media-summary-items { width: 100%; }
  .media-summary-chip { flex: 1 1 auto; }
  .room-accordion-header { gap: 10px; }
}

/* v0.9.7 visual system / Room polish: one SVG icon language, compact setup,
   modal Room administration and a real full-screen media inspector. */
.ui-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ui-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button .ui-icon { width: 16px; height: 16px; min-width: 16px; flex: 0 0 auto; margin: 0; }
.button:not(.icon-button) > .ui-icon { margin: 0; }
.badge-icon { width: 12px; height: 12px; min-width: 12px; }
.media-summary-icon { width: 13px; height: 13px; min-width: 13px; }

.sidebar-collapse-icon { width: 18px; height: 18px; font-size: inherit; transform: none !important; }
.nav-icon { width: 19px; height: 19px; min-width: 19px; font-size: inherit; }
body.sidebar-collapsed .sidebar .nav-icon { width: 20px; height: 20px; min-width: 20px; font-size: inherit; }
.sidebar-logout {
  justify-content: flex-start;
  border-color: rgba(235,107,118,.32);
  background: rgba(235,107,118,.07);
  color: #ffd8dc;
}
.sidebar-logout:hover:not(:disabled) { border-color: rgba(235,107,118,.58); background: rgba(235,107,118,.12); }
.logout-icon { color: var(--danger); }
body.sidebar-collapsed .sidebar-logout { color: var(--danger); }

.room-hero-actions .button { display: inline-flex; align-items: center; gap: 5px; }
.room-hero-actions .button .ui-icon { margin-right: 0; }

/* Accordions: down when open, right when closed. */
.room-accordion-chevron {
  width: 30px;
  height: 30px;
  transform: rotate(0deg);
  transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}
.room-accordion-chevron .ui-icon { width: 15px; height: 15px; min-width: 15px; }
.collapsed > .room-accordion-header .room-accordion-chevron,
.game-boards-section.collapsed > .room-accordion-header .room-accordion-chevron { transform: rotate(-90deg); }
.room-accordion-header:hover .room-accordion-chevron { color: var(--text); border-color: #3d4752; background: rgba(255,255,255,.025); }

/* Media configuration cards are visually distinct without becoming colorful noise. */
.room-video-settings-block { background: #0f1318; }
.room-media-settings-grid { align-items: stretch; }
.room-media-row {
  display: grid;
  grid-template-columns: minmax(135px,.7fr) minmax(190px,1.5fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  margin-top: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}
.room-media-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: auto;
  min-width: 0;
  white-space: nowrap;
}
.room-media-row-actions .icon-button { width: 38px; min-width: 38px; height: 38px; }
.room-media-row-actions .calibration-button, .room-media-row-actions .camera-settings-button { height: 38px; margin: 0; }
.room-media-row-title { min-width: 0; display: grid; gap: 2px; }
.room-media-row-title strong { font-size: 12px; }
.room-media-row-title span { color: var(--faint); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-media-row:first-of-type { border-top: 1px solid var(--border-soft); margin-top: 0; }
.room-media-row.media-tone-board { background: rgba(112,167,255,.055); border-color: rgba(112,167,255,.19); }
.room-media-row.media-tone-face { background: rgba(85,201,145,.05); border-color: rgba(85,201,145,.18); }
.room-media-row.media-tone-scanner { background: rgba(230,184,92,.05); border-color: rgba(230,184,92,.18); }
.room-settings-block.media-tone-audio { background: rgba(156,124,255,.045); border-color: rgba(156,124,255,.18); }
.media-summary-chip .ui-icon { color: currentColor; }

/* The normal Room is a setup/preview surface, not the immersive play surface. */
body:not(.game-view-active) .room-game-panel .board-video-stage.media-role-board { min-height: 130px; }
body:not(.game-view-active) .room-game-panel .board-video-stage.media-role-board video {
  max-height: min(28vh, 300px) !important;
  min-height: 0;
}
body:not(.game-view-active) .room-game-panel .board-tile { min-height: 130px; padding: 11px; gap: 7px; }
body:not(.game-view-active) .room-game-panel .board-video-placeholder { min-height: 72px; margin-top: 0; }
body:not(.game-view-active) .room-game-panel .media-role-card .board-video-stage { min-height: 86px; }
body:not(.game-view-active) .room-game-panel .media-role-card .board-video-stage video { max-height: 120px; }

/* Member roles are Room administration, opened from the Room header instead of
   living as a full-width block at the bottom of the setup page. */
.room-members-modal { width: min(760px, calc(100vw - 32px)); }
.room-members-modal-list { margin-top: 14px; }
.member-management-row { align-items: center; }
.member-management-row .list-actions { max-width: 58%; }

/* Board action wording is "large view", with a matching maximize/minimize icon. */

/* Full browser media inspector. It reuses the existing MediaStream and adds
   zoom/pan for actual image-quality inspection. */
.video-preview-overlay,
.video-preview-overlay.pinned {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: stretch;
  padding: 12px;
  pointer-events: auto;
  background: rgba(3,5,8,.93);
  backdrop-filter: blur(7px);
}
.video-preview-overlay.hidden { display: none; }
.video-preview-shell {
  width: 100%;
  height: calc(100vh - 24px);
  max-height: none;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  overflow: hidden;
  border: 1px solid #303946;
  border-radius: 14px;
  background: #050608;
  box-shadow: 0 22px 70px rgba(0,0,0,.7);
}
.video-preview-header { min-height: 48px; padding: 8px 10px 8px 14px; }
.video-preview-header > div { min-width: 0; display: flex; gap: 8px; align-items: baseline; }
.video-preview-header strong { color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-preview-header span { color: var(--faint); font-size: 10px; white-space: nowrap; }
.video-preview-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: default;
  background:
    linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%),
    linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%),
    #040507;
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
}
.video-preview-stage.dragging { cursor: grabbing; }
.video-preview-shell .video-preview-stage video,
.video-preview-shell .video-preview-stage canvas,
.video-preview-shell .video-preview-stage img {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  background: #050608;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.video-preview-stage video.zoomed, .video-preview-stage canvas.zoomed, .video-preview-stage img.zoomed { cursor: grab; }
.video-preview-stage.dragging video, .video-preview-stage.dragging canvas, .video-preview-stage.dragging img { cursor: grabbing; }
.video-preview-stage video.hidden, .video-preview-stage canvas.hidden, .video-preview-stage img.hidden { display:none; }
.video-preview-overlay.game-board-inspector .video-preview-header span { display:none; }
.video-preview-overlay.game-board-inspector .video-preview-shell { border-color:rgba(255,255,255,.16); }
.video-preview-overlay.freeze-inspector .video-preview-title::after { content:' · eingefroren'; color:var(--faint); font-weight:500; }
.video-preview-toolbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-top: 1px solid var(--border);
  background: #11161b;
}
.video-preview-zoom { min-width: 72px; text-align: center; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.preview-toolbar-spacer { flex: 1; }

@media (max-width: 760px) {
  .video-preview-overlay, .video-preview-overlay.pinned { padding: 4px; }
  .video-preview-shell { height: calc(100vh - 8px); border-radius: 10px; }
  .video-preview-header span { display: none; }
  .video-preview-toolbar { overflow-x: auto; }
  .room-hero-actions { width: 100%; }
  .room-hero-actions .button { flex: 1 1 auto; justify-content: center; }
  .member-management-row { align-items: flex-start; flex-direction: column; }
  .member-management-row .list-actions { max-width: none; width: 100%; justify-content: flex-start; }
}

/* v0.9.8 player-seat game setup: the Room config shows seats, not duplicate full Boards. */
.room-members-control {
  display: inline-flex;
  align-items: stretch;
  border-radius: 9px;
  box-shadow: 0 0 0 1px var(--border-soft);
  overflow: hidden;
}
.room-members-control .button {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.room-members-control .room-members-main {
  gap: 6px;
  padding-right: 10px;
}
.room-members-control .room-members-main strong {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: var(--text);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.room-members-control .room-members-add {
  position: relative;
  border-left: 1px solid var(--border-soft);
}
.room-invite-count {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 8px;
  font-weight: 750;
  line-height: 1;
}

.game-header { align-items: flex-start; }
.game-setup-config {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr);
  gap: 16px;
  align-items: end;
  margin: 14px 0 16px;
  padding: 13px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}
.game-setup-config > p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.game-setup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
}
.game-setup-field,
.game-setup-readonly { display: grid; gap: 5px; min-width: 0; }
.game-setup-field > span,
.game-setup-readonly > span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.game-setup-field select { min-width: 0; }
.game-setup-readonly strong { font-size: 13px; }

.game-seat-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-top: 4px;
}
.game-seat-layout.seats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.game-seat-layout.seats-3 .game-seat:first-child {
  grid-column: 1 / -1;
  width: calc(50% - 6px);
  justify-self: center;
}
.game-seat-layout.seats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.game-seat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: #0f1419;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.game-seat.own-seat { border-color: rgba(156,124,255,.43); background: rgba(156,124,255,.055); }
.game-seat.empty-seat { border-style: dashed; background: rgba(255,255,255,.012); }
.game-seat.team-a { box-shadow: inset 3px 0 0 rgba(112,167,255,.36); }
.game-seat.team-b { box-shadow: inset 3px 0 0 rgba(85,201,145,.34); }
.game-seat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.game-seat-head > div { min-width: 0; display: grid; gap: 2px; }
.game-seat-head strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-seat-head small { color: var(--faint); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-seat-kicker { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.game-seat-empty {
  min-height: 96px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 1px dashed rgba(255,255,255,.09);
  border-radius: 10px;
  color: var(--faint);
  font-size: 11px;
}
.game-seat-empty .ui-icon { width: 24px; height: 24px; opacity: .7; }
.game-seat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: auto; }
.game-seat.empty-seat .game-seat-actions { justify-content: center; }
.game-seat-media { display: grid; gap: 8px; }
.game-seat-camera {
  position: relative;
  min-height: 96px;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: #050608;
}
.game-seat-camera video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #050608;
  cursor: zoom-in;
}
.game-seat-camera.missing {
  align-content: center;
  gap: 6px;
  color: var(--faint);
  font-size: 10px;
}
.game-seat-camera.paused video { opacity: .35; }
.game-seat-camera-state {
  position: absolute;
  z-index: 2;
  left: 6px;
  bottom: 6px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(4,6,8,.78);
  color: #e7ebef;
  font-size: 9px;
  backdrop-filter: blur(4px);
}
.game-seat-media-flags { display: flex; flex-wrap: wrap; gap: 5px; }
.game-seat-media-flags span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--faint);
  font-size: 9px;
}
.game-seat-media-flags .ui-icon { width: 11px; height: 11px; min-width: 11px; }
.game-seat-media-flags span.ready { color: var(--success); border-color: color-mix(in srgb, var(--success) 28%, var(--border-soft)); }
.game-seat-media-flags span.missing { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, var(--border-soft)); }
.game-seat-media-flags span.muted { color: var(--warning); }
.game-unseated { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 10px; }

/* Two-Headed Giant is a true team layout in the play surface: opponents on top,
   own team on the bottom. Seat identity stays stable; only presentation rotates. */
.board-grid.mode-two_headed_giant.has-own-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.board-grid.mode-two_headed_giant.has-own-board .board-tile.own-board,
.board-grid.mode-two_headed_giant.has-own-board .board-tile.own-team { grid-column: auto; order: 20; }
.board-grid.mode-two_headed_giant.has-own-board .board-tile.opponent-team { order: 10; }
body.game-view-active .board-grid.mode-two_headed_giant.has-own-board .board-tile.own-board > .board-video-stage video,
body.game-view-active .board-grid.mode-two_headed_giant.has-own-board .board-tile.own-team > .board-video-stage video { max-height: 42vh; }
body.game-view-active .board-grid.mode-two_headed_giant.has-own-board .board-tile.opponent-team > .board-video-stage video { max-height: 35vh; }

@media (max-width: 900px) {
  .game-setup-config { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 680px) {
  .room-members-control { width: auto; }
  .game-setup-fields { grid-template-columns: 1fr; }
  .game-seat-layout,
  .game-seat-layout.seats-2,
  .game-seat-layout.seats-4,
  .board-grid.mode-two_headed_giant.has-own-board { grid-template-columns: 1fr; }
  .game-seat-layout.seats-3 .game-seat:first-child { grid-column: auto; width: auto; justify-self: stretch; }
}
body.game-view-active .game-setup-config,
body.game-view-active .game-seat-layout,
body.game-view-active .game-unseated { display: none; }

/* Free setup seats are directly clickable as a convenience; the explicit
   action button remains the keyboard/accessibility control. */
.game-seat.empty-seat[data-seat-claim-surface] { cursor: pointer; }
.game-seat.empty-seat[data-seat-claim-surface]:hover {
  border-color: rgba(156,124,255,.42);
  background: rgba(156,124,255,.045);
  transform: translateY(-1px);
}

/* v0.9.9 Room lifecycle + invite discovery polish. */
.nav-notification-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-2);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px #0e1115;
}
body.sidebar-collapsed .nav-notification-badge {
  position: absolute;
  top: 4px;
  right: 5px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-size: 8px;
}
body.sidebar-collapsed .main-nav a { position: relative; }

.room-title-row { display: flex; align-items: center; gap: 7px; }
.room-title-row h2 { margin-bottom: 0; }
.room-edit-button { width: 30px; height: 30px; color: var(--muted); border-color: transparent; background: transparent; }
.room-edit-button:hover { color: var(--text); border-color: var(--border); background: var(--panel-2); }
.room-members-control { position: relative; }

.room-edit-modal { width: min(720px, calc(100vw - 32px)); }
.room-edit-section {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--border-soft);
}
.room-edit-section:first-of-type { border-top: 0; }
.room-edit-section h3 { margin: 0 0 4px; font-size: 13px; }
.room-edit-section p { margin: 0; color: var(--muted); font-size: 11px; max-width: 520px; }
.room-edit-action { display: flex; gap: 8px; align-items: center; }
.room-edit-action input { min-width: min(300px, 38vw); }
.room-edit-section.danger-zone { margin-top: 4px; padding: 16px; border: 1px solid rgba(235,107,118,.25); border-radius: 10px; background: rgba(235,107,118,.045); }

.room-invite-picker { position: relative; margin: 4px 0 18px; }
.room-invite-search-label { margin: 0; }
.room-invite-suggestions {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: 64px;
  overflow: auto;
  max-height: 260px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #151a20;
  box-shadow: 0 15px 34px rgba(0,0,0,.42);
}
.room-invite-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.room-invite-suggestion:hover:not(:disabled) { background: var(--panel-2); }
.room-invite-suggestion:disabled { cursor: default; opacity: .72; }
.room-invite-suggestion span { min-width: 0; display: grid; gap: 2px; }
.room-invite-suggestion strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.room-invite-suggestion small { color: var(--faint); font-size: 10px; }
.room-invite-suggestion em { font-size: 10px; font-style: normal; white-space: nowrap; }
.room-invite-suggestion em.ready { color: #bdf6d9; }
.room-invite-suggestion-empty { padding: 10px; color: var(--muted); font-size: 11px; }
.room-invite-selected { min-height: 28px; padding: 7px 1px 0; font-size: 11px; }
.room-invite-picker .button-row { justify-content: flex-end; margin-top: 8px; }

@media (max-width: 760px) {
  .room-edit-section { grid-template-columns: 1fr; align-items: stretch; }
  .room-edit-action { align-items: stretch; flex-direction: column; }
  .room-edit-action input { min-width: 0; width: 100%; }
}

/* v0.9.12 player-card media bar + direct room leave action. */
.room-members-control .room-members-leave {
  border-left: 1px solid var(--border-soft);
  color: var(--muted);
}
.room-members-control .room-members-leave:hover {
  color: #ffb7bd;
  background: rgba(255,95,107,.07);
}

.game-seat-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.game-seat-person {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.game-seat-player-tools,
.board-player-media-tools {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
}
.game-seat-head > .game-seat-player-tools { display: flex; }
.game-seat-player-tools { white-space: nowrap; }
.game-seat .own-audio .voice-hud { gap: 4px; }
.game-seat .own-audio .voice-hud meter { width: 42px; min-width: 42px; }
.game-seat .own-audio [data-webrtc-status-kind="voice"] { display: none !important; }
.player-mini-media-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.player-mini-media,
.player-mini-media-placeholder {
  width: 38px;
  height: 28px;
  flex: 0 0 38px;
  border-radius: 7px;
}
.player-mini-media {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: #050608;
}
.player-mini-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050608;
  cursor: zoom-in;
}
.player-mini-media.paused video { opacity: .34; }
.player-mini-media-icon {
  position: absolute;
  z-index: 2;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(4,6,8,.78);
  pointer-events: none;
}
.player-mini-media-icon .ui-icon { width: 9px; height: 9px; }
.player-mini-media-placeholder { display: none; }

.player-card-audio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.player-card-audio.unavailable {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: var(--faint);
  opacity: .55;
}
.player-volume-control {
  position: relative;
}
.player-volume-control > summary {
  list-style: none;
}
.player-volume-control > summary::-webkit-details-marker { display: none; }
.player-volume-summary {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.player-volume-summary:hover,
.player-volume-control[open] > .player-volume-summary {
  border-color: var(--accent);
  color: var(--text);
}
.player-volume-summary .ui-icon { width: 14px; height: 14px; }
.player-volume-popover {
  position: absolute;
  z-index: 35;
  top: calc(100% + 6px);
  right: 0;
  width: 190px;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.player-volume-popover-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}
.player-volume-popover-head strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.player-volume-popover input[type="range"] {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.player-card-audio-mute {
  width: 28px;
  height: 28px;
  min-width: 28px;
}
.player-card-self-muted {
  display: inline-grid;
  place-items: center;
  color: var(--warning);
}
.player-card-self-muted[hidden] { display: none; }
.player-card-self-muted .ui-icon { width: 13px; height: 13px; }
.player-card-audio .voice-hud meter { width: 54px; min-width: 42px; }

.board-tile-head { align-items: center; }
.board-player-media-tools { margin-left: auto; }
body.game-view-active .board-player-line .player-mini-media,
body.game-view-active .board-player-line .player-mini-media-placeholder {
  width: 34px;
  height: 26px;
  flex-basis: 34px;
}
body.game-view-active .board-player-line .player-mini-media { margin-left: 2px; }
body.game-view-active .board-tile.has-facecam .board-tile-head { padding-left: 2px; }
body.game-view-active .board-player-media-tools .player-mini-media,
body.game-view-active .board-player-media-tools .player-mini-media-placeholder {
  width: 34px;
  height: 26px;
  flex-basis: 34px;
}
body.game-view-active .player-volume-summary { padding-inline: 6px; }


/* v0.9.12 game-view polish: board media is wrapped by data-board-role-slot,
   so presentation-only rules must target through that wrapper. */
body.game-view-active .board-tile > [data-board-role-slot="board"] > .board-video-stage > .board-video-meta,
body.game-view-active .board-tile > [data-board-role-slot="board"] > .board-video-stage > .board-video-hint,
body.game-view-active .board-tile > [data-board-role-slot="board"] > .board-video-stage > .video-source-control,
body.game-view-active .board-tile > [data-board-role-slot="board"] > .board-video-stage > [data-media-pause-toggle],
body.game-view-active .board-tile > [data-board-role-slot="board"] > .board-video-stage > [data-browser-camera-enable],
body.game-view-active .board-tile > [data-board-role-slot="board"] > .board-video-stage > [data-video-unbind] { display: none; }
body.game-view-active .board-tile > [data-board-role-slot="board"] > .board-video-stage .board-video-status { display: none; }
body.game-view-active .board-tile > [data-board-role-slot="board"] > .board-video-stage { margin-top: 0; }
body.game-view-active .board-grid.has-own-board .board-tile.own-board > [data-board-role-slot="board"] > .board-video-stage video { max-height: 57vh; }
body.game-view-active .board-grid.has-own-board .board-tile.opponent-board > [data-board-role-slot="board"] > .board-video-stage video { max-height: 32vh; }
body.game-view-active .board-grid.mode-two_headed_giant.has-own-board .board-tile.own-board > [data-board-role-slot="board"] > .board-video-stage video,
body.game-view-active .board-grid.mode-two_headed_giant.has-own-board .board-tile.own-team > [data-board-role-slot="board"] > .board-video-stage video { max-height: 42vh; }
body.game-view-active .board-grid.mode-two_headed_giant.has-own-board .board-tile.opponent-team > [data-board-role-slot="board"] > .board-video-stage video { max-height: 35vh; }
body.game-view-active .game-primary-actions { display: none; }
body.game-view-active .game-view-toolbar .game-finish-compact {
  color: #ffd8dc;
  border-color: rgba(235,107,118,.38);
  background: rgba(235,107,118,.08);
}
body.game-view-active .game-view-toolbar .game-finish-compact:hover:not(:disabled) {
  border-color: rgba(235,107,118,.62);
  background: rgba(235,107,118,.14);
}

@media (max-width: 760px) {
  .board-tile-head { align-items: flex-start; }
  .board-player-media-tools { flex-wrap: wrap; gap: 5px; }
  .player-volume-popover { right: -32px; width: 176px; }
  body.game-view-active .board-tile.has-facecam .board-tile-head { padding-left: 2px; }
}


@media (max-width: 520px) {
  .game-seat-head { grid-template-columns: 1fr; align-items: start; }
  .game-seat-player-tools { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}

/* v0.9.13 own-microphone settings polish: keep the setup card compact, but make
   DSP controls, gain and the live input meter properly aligned and full-width. */
.room-own-audio-title {
  align-items: flex-start;
  margin-bottom: 12px;
}
.room-own-audio-title > div:first-child { min-width: 0; }
.room-own-audio-title-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.room-own-audio-title-actions .icon-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
}
.room-audio-own-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.room-audio-own-row select { min-width: 0; }
.browser-audio-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.audio-toggle-setting {
  min-height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.audio-toggle-setting > span {
  display: block;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}
.audio-toggle-setting > span small {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 600;
}
.audio-toggle-setting.browser-fixed { cursor: default; }
.audio-toggle-setting.browser-fixed > span small { color: var(--muted); }
.audio-toggle-setting.browser-mismatch > span small { color: var(--warning); }
.audio-toggle-setting input[type="checkbox"]:disabled { opacity: .55; cursor: not-allowed; }
.audio-toggle-setting input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  justify-self: end;
  accent-color: var(--accent);
}
.gain-setting,
.own-audio-level-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}
.audio-setting-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.2;
}
.audio-setting-head > span { margin: 0; }
.audio-setting-note { color: var(--faint); font-size: 10px; font-weight: 600; }
.gain-setting input[type="range"] {
  width: 100%;
  min-width: 0;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.own-audio-level-setting {
  margin-top: 10px;
}
.own-audio-level-setting meter {
  display: block;
  width: 100%;
  min-width: 0;
  height: 14px;
  margin: 0;
}

@media (max-width: 620px) {
  .room-audio-own-row { grid-template-columns: minmax(0, 1fr); }
  .room-audio-own-row select { grid-column: 1; }
  .browser-audio-options { grid-template-columns: minmax(0, 1fr); }
  .browser-audio-options .gain-setting { grid-column: 1; grid-template-columns: minmax(0, 1fr); }
}



.player-avatar { display:inline-grid; place-items:center; width:34px; height:34px; min-width:34px; border-radius:9px; background:linear-gradient(145deg,#293544,#111821); color:#eef3f8; font-weight:900; border:1px solid rgba(255,255,255,.13); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.player-avatar > span { transform:translateY(-1px); font-size:18px; line-height:1; }
.player-avatar-shield { background:linear-gradient(145deg,#293744,#18202a); }
.player-avatar-crystal { background:linear-gradient(145deg,#342b47,#171322); }
.player-avatar-moon { background:linear-gradient(145deg,#243446,#111721); }
.player-avatar-flame { background:linear-gradient(145deg,#483126,#21150f); }
.player-avatar-rune { background:linear-gradient(145deg,#294137,#121e19); }
.profile-avatar-picker { display:grid; gap:10px; padding:12px 0 16px; }
.profile-avatar-picker p { margin:3px 0 0; }
.profile-avatar-options { display:flex; flex-wrap:wrap; gap:8px; }
.profile-avatar-option { padding:4px; border:1px solid var(--border-soft); border-radius:12px; background:transparent; cursor:pointer; }
.profile-avatar-option:hover { background:rgba(255,255,255,.05); }
.profile-avatar-option.selected { border-color:rgba(255,255,255,.55); box-shadow:0 0 0 2px rgba(255,255,255,.08); }

/* v0.9.19 Game View bottom dock + unobtrusive away status. */
.game-view-toolbar {
  top: auto;
  right: auto;
  left: 50%;
  bottom: 0;
  width: min(520px, 88vw);
  height: 72px;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: translateX(-50%);
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}
.game-view-toolbar-handle {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 52px;
  height: 17px;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: rgba(12,15,18,.72);
  color: rgba(255,255,255,.58);
  cursor: pointer;
  pointer-events: auto;
}
.game-view-toolbar-dock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(12,15,18,.88);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
  backdrop-filter: blur(14px);
  transform: translateY(calc(100% + 18px));
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  pointer-events: auto;
}
.game-view-toolbar:hover .game-view-toolbar-dock,
.game-view-toolbar:focus-within .game-view-toolbar-dock { transform: translateY(0); opacity: 1; }
.game-view-toolbar-divider { width:1px; height:25px; background:rgba(255,255,255,.14); }
.game-view-toolbar-title { display:none; }
.game-player-away-status { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:999px; color:#ffd57a; background:rgba(255,189,74,.16); }
.game-player-away-status[hidden] { display:none; }
.game-player-away-status .ui-icon { width:11px; height:11px; }
.player-avatar-fallback { display:inline-grid; place-items:center; background:rgba(255,255,255,.05); }
.player-mini-avatar { width:100%; height:100%; min-width:0; border-radius:inherit; }

@media (max-width:760px) {
  .game-view-toolbar { left:50%; right:auto; top:auto; bottom:0; width:min(460px,94vw); justify-content:center; }
  .game-view-toolbar .button-row { width:auto; }
}


/* v0.9.19 Game View inspector tools. Tool state is local presentation only. */
.game-view-toolbar [data-game-tool].active {
  border-color:rgba(156,124,255,.52);
  background:var(--accent-soft);
  color:#e3dcff;
}
body.game-view-active[data-game-view-tool="boardInspect"] .board-video-stage.media-role-board { cursor:zoom-in; }
body.game-view-active[data-game-view-tool="areaInspect"] .board-video-stage.media-role-board { cursor:crosshair; touch-action:none; }
.board-video-stage.media-role-board.game-board-selecting { user-select:none; }
.game-board-selection-box {
  position:absolute;
  z-index:35;
  pointer-events:none;
  border:2px solid rgba(255,255,255,.96);
  border-radius:5px;
  background:rgba(156,124,255,.12);
  box-shadow:0 0 0 9999px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.55);
}
body.game-view-active .board-video-stage.media-role-board { position:relative; }

/* v0.9.19 Game View 2.0 live surface: borderless boards, thin separators, corner HUDs.
   Normal Room/setup presentation is intentionally untouched. */
body.game-view-active .page-content { padding:0; height:100vh; overflow:hidden; }
body.game-view-active .room-game-panel { height:100vh; min-height:100vh; padding:0; overflow:hidden; }
body.game-view-active .game-layout { height:100%; }
body.game-view-active .board-grid {
  position:relative;
  width:100%;
  height:100vh;
  gap:1px;
  padding:0;
  align-items:stretch;
  background:rgba(255,255,255,.16);
  overflow:hidden;
}
body.game-view-active .board-grid.gv-live-2 { grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
body.game-view-active .board-grid.gv-live-2 .gv-slot-2 { grid-column:1; grid-row:1; }
body.game-view-active .board-grid.gv-live-2 .gv-slot-1 { grid-column:1; grid-row:2; }
body.game-view-active .board-grid.gv-live-3 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
body.game-view-active .board-grid.gv-live-3 .gv-slot-2 { grid-column:1; grid-row:1; }
body.game-view-active .board-grid.gv-live-3 .gv-slot-3 { grid-column:2; grid-row:1; }
body.game-view-active .board-grid.gv-live-3 .gv-slot-1 { grid-column:1 / 3; grid-row:2; }
body.game-view-active .board-grid.gv-live-4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
body.game-view-active .board-grid.gv-live-4 .gv-slot-3 { grid-column:1; grid-row:1; }
body.game-view-active .board-grid.gv-live-4 .gv-slot-4 { grid-column:2; grid-row:1; }
body.game-view-active .board-grid.gv-live-4 .gv-slot-1 { grid-column:1; grid-row:2; }
body.game-view-active .board-grid.gv-live-4 .gv-slot-2 { grid-column:2; grid-row:2; }

body.game-view-active .board-tile,
body.game-view-active .board-grid.has-own-board .board-tile.own-board {
  position:relative;
  min-width:0;
  min-height:0;
  height:auto;
  padding:0;
  gap:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#050608;
  overflow:hidden;
}
body.game-view-active .board-tile > [data-board-role-slot="board"] { position:absolute; inset:0; min-width:0; min-height:0; }
body.game-view-active .board-tile > [data-board-role-slot="board"] > .board-video-stage.media-role-board {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  border:0;
  border-radius:0;
  background:#050608;
}
body.game-view-active .board-tile > [data-board-role-slot="board"] > .board-video-stage.media-role-board > video {
  width:100%;
  height:100%;
  max-height:none !important;
  aspect-ratio:auto;
  object-fit:contain;
  background:#050608;
}
body.game-view-active .board-video-placeholder.media-role-board {
  position:absolute;
  inset:0;
  min-height:0;
  margin:0;
  border:0;
  border-radius:0;
  display:grid;
  place-content:center;
  text-align:center;
  background:#07090c;
}
body.game-view-active .board-tile-head {
  position:absolute;
  z-index:32;
  width:auto;
  max-width:calc(100% - 12px);
  min-height:0;
  padding:4px 5px !important;
  gap:4px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  background:rgba(6,8,11,.72);
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  backdrop-filter:blur(8px);
  pointer-events:auto;
}
body.game-view-active .board-tile.gv-hud-top-left .board-tile-head { top:6px; left:6px; }
body.game-view-active .board-tile.gv-hud-top-right .board-tile-head { top:6px; right:6px; }
body.game-view-active .board-tile.gv-hud-bottom-left .board-tile-head { bottom:6px; left:6px; }
body.game-view-active .board-tile.gv-hud-bottom-right .board-tile-head { bottom:6px; right:6px; }
body.game-view-active .board-tile-head > div:first-child { min-width:0; }
body.game-view-active .board-player-line { gap:5px; flex-wrap:nowrap; }
body.game-view-active .board-player { font-size:clamp(11px,1.1vw,14px); white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
body.game-view-active .board-player-line .player-mini-media,
body.game-view-active .board-player-line .player-mini-media-placeholder { width:30px; height:30px; flex-basis:30px; border-radius:7px; }
body.game-view-active .board-player-media-tools { display:none; }
body.game-view-active .privacy-banner { z-index:31; max-width:min(360px,70%); left:50%; top:50%; transform:translate(-50%,-50%); }
body.game-view-active .game-primary-actions { display:none; }

@media (max-width:760px) {
  body.game-view-active .board-tile-head { padding:3px 4px !important; }
  body.game-view-active .board-tile.gv-hud-top-left .board-tile-head { top:4px; left:4px; }
  body.game-view-active .board-tile.gv-hud-top-right .board-tile-head { top:4px; right:4px; }
  body.game-view-active .board-tile.gv-hud-bottom-left .board-tile-head { bottom:4px; left:4px; }
  body.game-view-active .board-tile.gv-hud-bottom-right .board-tile-head { bottom:4px; right:4px; }
  body.game-view-active .board-player { max-width:90px; }
}


/* v0.9.20 Game View 2.0 cleanup: remove remaining legacy chrome and keep HUDs fully inside slots. */
body.game-view-active .game-header { display:none !important; }
body.game-view-active .board-tile-head {
  z-index:45;
  max-width:min(360px, calc(100% - 16px));
}
body.game-view-active .board-tile.gv-hud-top-left .board-tile-head { top:8px; left:8px; }
body.game-view-active .board-tile.gv-hud-top-right .board-tile-head { top:8px; right:8px; }
body.game-view-active .board-tile.gv-hud-bottom-left .board-tile-head { bottom:10px; left:8px; }
body.game-view-active .board-tile.gv-hud-bottom-right .board-tile-head { bottom:10px; right:8px; }
/* The technical per-video status text belongs to Room/diagnostics, not the play surface. */
body.game-view-active .board-video-status { display:none !important; }

/* v0.9.21 local live-layout presets + draggable splitters. */
body.game-view-active .board-grid {
  --gv-split-x: 50%;
  --gv-split-y: 50%;
}
body.game-view-active .board-grid.gv-separators-none { gap:0; background:#050608; }
body.game-view-active .board-grid.gv-separators-thin { gap:1px; background:rgba(255,255,255,.16); }
body.game-view-active .board-grid.gv-layout-duel { grid-template-columns:1fr; grid-template-rows:var(--gv-split-y) minmax(0,1fr); }
body.game-view-active .board-grid.gv-layout-duel .gv-slot-2 { grid-column:1; grid-row:1; }
body.game-view-active .board-grid.gv-layout-duel .gv-slot-1 { grid-column:1; grid-row:2; }
body.game-view-active .board-grid.gv-layout-side { grid-template-columns:var(--gv-split-x) minmax(0,1fr); grid-template-rows:1fr; }
body.game-view-active .board-grid.gv-layout-side .gv-slot-1 { grid-column:1; grid-row:1; }
body.game-view-active .board-grid.gv-layout-side .gv-slot-2 { grid-column:2; grid-row:1; }
body.game-view-active .board-grid.gv-layout-three-wide { grid-template-columns:var(--gv-split-x) minmax(0,1fr); grid-template-rows:var(--gv-split-y) minmax(0,1fr); }
body.game-view-active .board-grid.gv-layout-three-wide .gv-slot-2 { grid-column:1; grid-row:1; }
body.game-view-active .board-grid.gv-layout-three-wide .gv-slot-3 { grid-column:2; grid-row:1; }
body.game-view-active .board-grid.gv-layout-three-wide .gv-slot-1 { grid-column:1 / 3; grid-row:2; }
body.game-view-active .board-grid.gv-layout-three-left { grid-template-columns:var(--gv-split-x) minmax(0,1fr); grid-template-rows:var(--gv-split-y) minmax(0,1fr); }
body.game-view-active .board-grid.gv-layout-three-left .gv-slot-1 { grid-column:1; grid-row:1 / 3; }
body.game-view-active .board-grid.gv-layout-three-left .gv-slot-2 { grid-column:2; grid-row:1; }
body.game-view-active .board-grid.gv-layout-three-left .gv-slot-3 { grid-column:2; grid-row:2; }
body.game-view-active .board-grid.gv-layout-three-right { grid-template-columns:var(--gv-split-x) minmax(0,1fr); grid-template-rows:var(--gv-split-y) minmax(0,1fr); }
body.game-view-active .board-grid.gv-layout-three-right .gv-slot-1 { grid-column:2; grid-row:1 / 3; }
body.game-view-active .board-grid.gv-layout-three-right .gv-slot-2 { grid-column:1; grid-row:1; }
body.game-view-active .board-grid.gv-layout-three-right .gv-slot-3 { grid-column:1; grid-row:2; }
body.game-view-active .board-grid.gv-layout-grid { grid-template-columns:var(--gv-split-x) minmax(0,1fr); grid-template-rows:var(--gv-split-y) minmax(0,1fr); }
body.game-view-active .board-grid.gv-layout-grid .gv-slot-3 { grid-column:1; grid-row:1; }
body.game-view-active .board-grid.gv-layout-grid .gv-slot-4 { grid-column:2; grid-row:1; }
body.game-view-active .board-grid.gv-layout-grid .gv-slot-1 { grid-column:1; grid-row:2; }
body.game-view-active .board-grid.gv-layout-grid .gv-slot-2 { grid-column:2; grid-row:2; }
.game-view-split-handle {
  position:absolute;
  z-index:38;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  opacity:0;
  touch-action:none;
  pointer-events:auto;
}
.game-view-split-handle.split-x { top:0; bottom:0; left:calc(var(--gv-split-x) - 10px); width:20px; cursor:col-resize; }
.game-view-split-handle.split-y { left:0; right:0; top:calc(var(--gv-split-y) - 10px); height:20px; cursor:row-resize; }
.game-view-split-handle.split-xy { left:calc(var(--gv-split-x) - 13px); top:calc(var(--gv-split-y) - 13px); width:26px; height:26px; cursor:move; border-radius:50%; }
body.game-view-resizing { user-select:none; cursor:move; }
body.game-view-active .board-grid[data-hud-size="compact"] .board-tile-head { transform:scale(.88); transform-origin:inherit; }
body.game-view-active .board-grid[data-hud-size="large"] .board-tile-head { transform:scale(1.16); transform-origin:inherit; }
body.game-view-active .board-tile.gv-hud-top-left .board-tile-head { transform-origin:top left; }
body.game-view-active .board-tile.gv-hud-top-right .board-tile-head { transform-origin:top right; }
body.game-view-active .board-tile.gv-hud-bottom-left .board-tile-head { transform-origin:bottom left; }
body.game-view-active .board-tile.gv-hud-bottom-right .board-tile-head { transform-origin:bottom right; }

/* Active game in Room settings stays a compact/equal overview; immersive sizing is Game View only. */
body:not(.game-view-active) .room-game-panel .board-grid.has-own-board,
body:not(.game-view-active) .room-game-panel .board-grid.spectator-layout { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
body:not(.game-view-active) .room-game-panel .board-grid.has-own-board .board-tile,
body:not(.game-view-active) .room-game-panel .board-grid.has-own-board .board-tile.own-board,
body:not(.game-view-active) .room-game-panel .board-grid.spectator-layout .board-tile { grid-column:auto; order:0; width:auto; min-width:0; }
body:not(.game-view-active) .room-game-panel .board-grid.has-own-board .board-tile > [data-board-role-slot="board"] > .board-video-stage video,
body:not(.game-view-active) .room-game-panel .board-grid.spectator-layout .board-tile > [data-board-role-slot="board"] > .board-video-stage video { max-height:220px; }
@media (max-width:760px) {
  body:not(.game-view-active) .room-game-panel .board-grid.has-own-board,
  body:not(.game-view-active) .room-game-panel .board-grid.spectator-layout { grid-template-columns:1fr; }
}

/* v0.9.21 semantic marker layer sits above arrows/annotations and below HUD/dialog chrome. */
body.game-view-active .game-board-annotation-layer,
body.game-view-active .game-board-marker-layer { position:absolute; inset:0; }
body.game-view-active .game-board-annotation-layer { z-index:22; pointer-events:none; }
body.game-view-active .game-board-marker-layer { z-index:24; pointer-events:none; }
body:not(.game-view-active) .game-board-annotation-layer,
body:not(.game-view-active) .game-board-marker-layer { display:none; }
.game-board-marker {
  position:absolute;
  width:26px;
  height:26px;
  min-width:26px;
  padding:0;
  margin:0;
  border:1px solid rgba(255,255,255,.82);
  border-radius:999px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  background:rgba(37,28,71,.92);
  color:#fff;
  font:800 13px/1 system-ui,sans-serif;
  box-shadow:0 4px 12px rgba(0,0,0,.48);
  cursor:pointer;
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.game-board-marker:hover,.game-board-marker:focus-visible { z-index:5; border-color:#fff; transform:translate(-50%,-50%) scale(1.08); }
.game-board-marker-dot { pointer-events:none; }
.game-board-marker-count { position:absolute; right:-6px; top:-7px; min-width:16px; height:16px; padding:0 4px; display:grid; place-items:center; border-radius:999px; background:#fff; color:#16131e; font-size:9px; box-shadow:0 2px 7px rgba(0,0,0,.45); }
.game-board-marker-popover {
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  width:max-content;
  max-width:min(320px,55vw);
  min-width:150px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:10px;
  background:rgba(9,11,15,.96);
  color:var(--text);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  transform:translateX(-50%) translateY(3px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  text-align:left;
  font-size:11px;
  line-height:1.35;
  transition:opacity .12s ease, transform .12s ease;
}
.game-board-marker:hover .game-board-marker-popover,.game-board-marker:focus-visible .game-board-marker-popover { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.game-board-marker-popover strong,.game-board-marker-popover small { display:block; }
.game-board-marker-popover small { color:var(--muted); margin-top:3px; }
.game-marker-stack-list { display:grid; gap:2px; margin-top:6px; }
.game-marker-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.game-marker-tags span { padding:2px 5px; border-radius:999px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.05); }
.game-marker-modal textarea { resize:vertical; }
.game-marker-modal-actions .spacer { flex:1; }
.game-marker-readonly { display:grid; gap:7px; }

body.game-view-active .game-arrow-layer { position:absolute; inset:0; width:100%; height:100%; z-index:20; overflow:visible; pointer-events:none; }
.game-board-ping {
  position:absolute;
  width:112px;
  height:112px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  user-select:none;
  z-index:1;
}
.game-board-ping::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,42,55,.98) 0 11%, rgba(255,35,48,.78) 23%, rgba(255,24,38,.42) 46%, rgba(255,12,28,.16) 64%, rgba(255,0,20,0) 80%);
  filter:drop-shadow(0 0 8px rgba(255,24,40,.42));
  animation:game-board-ping-core 3s linear forwards;
}
.game-board-ping::before {
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:32px; height:32px;
  margin:-16px 0 0 -16px;
  border:3px solid rgba(255,70,80,.9);
  border-radius:50%;
  box-shadow:0 0 10px rgba(255,35,48,.42);
  animation:game-board-ping-pulse .82s ease-out forwards;
}
@keyframes game-board-ping-core {
  0% { transform:scale(1.08); opacity:1; }
  100% { transform:scale(0); opacity:0; }
}
@keyframes game-board-ping-pulse {
  0% { transform:scale(.45); opacity:.95; }
  100% { transform:scale(3.15); opacity:0; }
}
body.game-view-ping-armed .board-video-stage.media-role-board { cursor:crosshair; }
@media (prefers-reduced-motion:reduce) {
  .game-board-ping::before { animation-duration:.2s; }
  .game-board-ping::after { animation-timing-function:linear; }
}
.game-arrow-layer marker path { fill:rgba(240,234,255,.94); }
.game-arrow { stroke:rgba(240,234,255,.92); stroke-width:4; stroke-linecap:round; filter:drop-shadow(0 2px 3px rgba(0,0,0,.65)); pointer-events:stroke; cursor:pointer; }
.game-arrow.draft { stroke-dasharray:8 6; opacity:.72; pointer-events:none; }
.game-arrow.selected { stroke-width:6; stroke:rgba(255,221,123,.98); }
body.game-view-active[data-game-view-tool="marker"] .board-video-stage.media-role-board { cursor:copy; }
body.game-view-active[data-game-view-tool="arrow"] .board-tile,
body.game-view-active[data-game-view-tool="arrow"] .game-board-marker { cursor:crosshair; }

/* Board rotation is local presentation. Only board video rotates; HUD/text stays viewer-readable.
   Marker/arrow geometry is projected from canonical normalized board coordinates in JS. */
body.game-view-active .board-tile > [data-board-role-slot="board"] > .board-video-stage.media-role-board > video {
  transform:rotate(var(--gv-board-rotation,0deg)) scale(var(--gv-board-scale,1));
  transform-origin:50% 50%;
  will-change:transform;
}
.game-arrow-delete {
  position:absolute;
  z-index:22;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  transform:translate(-50%,-50%);
  border-radius:999px !important;
  pointer-events:auto;
  box-shadow:0 4px 12px rgba(0,0,0,.48);
}
.game-board-marker.snap-target {
  border-color:#fff;
  box-shadow:0 0 0 4px rgba(156,124,255,.28),0 5px 15px rgba(0,0,0,.5);
  transform:translate(-50%,-50%) scale(1.13);
}

/* v0.9.23 Game View interaction polish. */
body.game-view-active[data-game-view-tool="pointer"] .board-video-stage.media-role-board,
body.game-view-active[data-game-view-tool="pointer"] .board-video-stage.media-role-board > video { cursor:default !important; }

/* Splitters keep a generous invisible hitbox, but expose a one-pixel visual guide. */
.game-view-split-handle { opacity:1; }
.game-view-split-handle::after { content:""; position:absolute; pointer-events:none; background:rgba(255,255,255,.26); box-shadow:0 0 0 1px rgba(0,0,0,.18); }
.game-view-split-handle.split-x::after { top:0; bottom:0; left:50%; width:1px; transform:translateX(-.5px); }
.game-view-split-handle.split-y::after { left:0; right:0; top:50%; height:1px; transform:translateY(-.5px); }
.game-view-split-handle.split-xy::before,
.game-view-split-handle.split-xy::after { content:""; position:absolute; pointer-events:none; background:rgba(255,255,255,.28); }
.game-view-split-handle.split-xy::before { left:50%; top:-13px; bottom:-13px; width:1px; }
.game-view-split-handle.split-xy::after { top:50%; left:-13px; right:-13px; height:1px; }

/* Facecam itself is the identity surface: no decorative icon over a face. */
body.game-view-active .player-mini-media[data-board-role-slot="face"] { cursor:zoom-in; }
body.game-view-active .player-mini-media[data-board-role-slot="face"] video { cursor:zoom-in !important; }

/* Local conversation mode: same player corner, substantially larger face/avatar, boards remain untouched. */
body.game-view-active.game-view-videochat .board-tile-head { padding:7px 8px !important; gap:7px; }
body.game-view-active.game-view-videochat .board-player-line { align-items:flex-end; }
body.game-view-active.game-view-videochat .board-player-line .player-mini-media,
body.game-view-active.game-view-videochat .board-player-line .player-mini-media-placeholder {
  width:clamp(112px,15vw,210px);
  height:clamp(84px,11vw,158px);
  flex-basis:auto;
  border-radius:12px;
  background:rgba(9,11,15,.9);
  box-shadow:0 8px 28px rgba(0,0,0,.48);
}
body.game-view-active.game-view-videochat .board-player-line .player-mini-media video,
body.game-view-active.game-view-videochat .board-player-line .player-mini-avatar { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
body.game-view-active.game-view-videochat .board-player { font-size:clamp(13px,1.25vw,17px); max-width:180px; }

/* Arrow delete action is deliberately offset from the line by JS. */
.game-arrow-delete { outline:1px solid rgba(255,255,255,.18); }

/* v0.9.23 interaction correctness: tool cursors, cross-board arrows, reliable deletion. */
body.game-view-active .board-video-stage.media-role-board,
body.game-view-active .board-video-stage.media-role-board > video { cursor:default !important; }
body.game-view-active[data-game-view-tool="boardInspect"] .board-video-stage.media-role-board,
body.game-view-active[data-game-view-tool="boardInspect"] .board-video-stage.media-role-board > video { cursor:zoom-in !important; }
body.game-view-active[data-game-view-tool="areaInspect"] .board-video-stage.media-role-board,
body.game-view-active[data-game-view-tool="areaInspect"] .board-video-stage.media-role-board > video { cursor:crosshair !important; }
body.game-view-active[data-game-view-tool="marker"] .board-video-stage.media-role-board,
body.game-view-active[data-game-view-tool="marker"] .board-video-stage.media-role-board > video { cursor:copy !important; }
body.game-view-active[data-game-view-tool="arrow"] .board-tile,
body.game-view-active[data-game-view-tool="arrow"] .board-video-stage.media-role-board,
body.game-view-active[data-game-view-tool="arrow"] .board-video-stage.media-role-board > video,
body.game-view-active[data-game-view-tool="arrow"] .game-board-marker { cursor:crosshair !important; }
/* While drawing an arrow the layout splitters are view-only; they must never intercept the drag. */
body.game-view-active[data-game-view-tool="arrow"] .game-view-split-handle { pointer-events:none !important; }
/* Visible arrow is presentation only; a wider transparent hit stroke handles selection reliably. */
.game-arrow { pointer-events:none !important; }
.game-arrow-hit { stroke:transparent; stroke-width:22; stroke-linecap:round; fill:none; pointer-events:stroke; cursor:pointer; }
.game-arrow-group { pointer-events:visiblePainted; }
.game-arrow-delete { z-index:60; }

.virtual-board-camera{position:relative;overflow:hidden;background:#050608;min-height:220px}.virtual-board-test-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:rotate(var(--gv-board-rotation,0deg)) scale(var(--gv-board-scale,1));transform-origin:50% 50%;will-change:transform}.virtual-board-noninteractive-hint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:2;max-width:88%;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.68);color:rgba(255,255,255,.72);font-size:8px;white-space:nowrap;pointer-events:none}.developer-mode-card .notice{margin-top:.75rem}
body:not(.game-view-active) .game-view-split-handle{display:none!important}


/* v0.9.26 interaction/layout cleanup. */
/* The bottom activation strip is intentionally much wider than the visible dock. */
.game-view-toolbar { width:min(920px,96vw); }
.game-view-toolbar::before { content:""; position:absolute; left:0; right:0; bottom:0; height:28px; pointer-events:auto; }
.game-view-toolbar-handle,.game-view-toolbar-dock { z-index:1; }

/* Horizontal split owns both tracks explicitly; legacy own-board ordering must not influence sizing/paint. */
body.game-view-active .board-grid.gv-layout-side {
  grid-template-columns:minmax(0,var(--gv-split-x)) minmax(0,1fr);
}
body.game-view-active .board-grid.gv-layout-side .board-tile { order:0 !important; min-width:0 !important; width:auto !important; max-width:none !important; }
body.game-view-active .board-grid.gv-layout-side .gv-slot-1 { grid-column:1 !important; grid-row:1 !important; }
body.game-view-active .board-grid.gv-layout-side .gv-slot-2 { grid-column:2 !important; grid-row:1 !important; }
body.game-view-active .board-grid.gv-layout-side .board-tile > [data-board-role-slot="board"],
body.game-view-active .board-grid.gv-layout-side .board-video-stage.media-role-board,
body.game-view-active .board-grid.gv-layout-side .board-video-stage.media-role-board > video { min-width:0; max-width:100%; }

/* Selected arrows expose draggable endpoint handles without making the visible line bulky. */
.game-arrow-endpoint { fill:rgba(255,221,123,.96); stroke:rgba(20,16,25,.92); stroke-width:2; pointer-events:all; cursor:grab; filter:drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
.game-arrow-endpoint:active { cursor:grabbing; }

/* v0.9.29 Karteninfo 2.0: rich Scryfall-backed hover, stack editor, optional counters/trackers. */
.game-board-marker { overflow:visible; }
.game-board-marker:focus-visible { outline:2px solid rgba(255,221,123,.95); outline-offset:3px; }
.game-board-marker-popover {
  width:clamp(360px,40vw,560px);
  max-width:calc(100vw - 28px);
  max-height:min(76vh,720px);
  overflow:auto;
  padding:12px;
  border-radius:14px;
  pointer-events:auto;
  cursor:default;
  scrollbar-width:thin;
}
.game-board-marker.is-pinned { z-index:9; border-color:rgba(255,221,123,.98); box-shadow:0 0 0 3px rgba(255,221,123,.15),0 5px 18px rgba(0,0,0,.58); }
.game-board-marker.is-pinned .game-board-marker-popover { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.game-board-marker.popover-below .game-board-marker-popover { bottom:auto; top:calc(100% + 9px); transform:translateX(-50%) translateY(-3px); }
.game-board-marker.popover-below:hover .game-board-marker-popover,
.game-board-marker.popover-below:focus-visible .game-board-marker-popover,
.game-board-marker.popover-below.is-pinned .game-board-marker-popover { transform:translateX(-50%) translateY(0); }
.game-board-marker.popover-align-left .game-board-marker-popover { left:-7px; transform:translateX(0) translateY(3px); }
.game-board-marker.popover-align-left:hover .game-board-marker-popover,
.game-board-marker.popover-align-left:focus-visible .game-board-marker-popover,
.game-board-marker.popover-align-left.is-pinned .game-board-marker-popover { transform:translateX(0) translateY(0); }
.game-board-marker.popover-align-right .game-board-marker-popover { left:auto; right:-7px; transform:translateX(0) translateY(3px); }
.game-board-marker.popover-align-right:hover .game-board-marker-popover,
.game-board-marker.popover-align-right:focus-visible .game-board-marker-popover,
.game-board-marker.popover-align-right.is-pinned .game-board-marker-popover { transform:translateX(0) translateY(0); }
.game-board-marker.popover-below.popover-align-left .game-board-marker-popover,
.game-board-marker.popover-below.popover-align-right .game-board-marker-popover { transform:translateX(0) translateY(-3px); }
.game-board-marker.popover-below.popover-align-left:hover .game-board-marker-popover,
.game-board-marker.popover-below.popover-align-left:focus-visible .game-board-marker-popover,
.game-board-marker.popover-below.popover-align-left.is-pinned .game-board-marker-popover,
.game-board-marker.popover-below.popover-align-right:hover .game-board-marker-popover,
.game-board-marker.popover-below.popover-align-right:focus-visible .game-board-marker-popover,
.game-board-marker.popover-below.popover-align-right.is-pinned .game-board-marker-popover { transform:translateX(0) translateY(0); }
.game-marker-hover-shell { display:grid; gap:10px; min-width:0; }
.game-marker-hero { --game-marker-card-preview-width:clamp(154px,15vw,178px); display:grid; grid-template-columns:var(--game-marker-card-preview-width) minmax(0,1fr); gap:14px; align-items:start; }
.game-marker-card-image { display:block; width:var(--game-marker-card-preview-width); aspect-ratio:63/88; object-fit:cover; border-radius:8px; background:#080a0d; box-shadow:0 5px 16px rgba(0,0,0,.45); }
.game-marker-card-image-empty { display:grid; place-items:center; padding:10px; border:1px dashed rgba(255,255,255,.16); color:var(--muted); text-align:center; }
.game-marker-card-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; gap:4px; }
.game-marker-card-copy > strong { font-size:15px; line-height:1.2; color:#fff; }
.game-marker-kicker { color:#9f8cff; font-size:9px; line-height:1; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.game-marker-canonical-name { margin:0 !important; color:var(--faint) !important; }
.game-marker-type { color:#d9dce3; font-size:10px; line-height:1.3; }
.game-marker-card-stats { display:inline-flex; padding:2px 6px; border:1px solid rgba(255,255,255,.16); border-radius:6px; color:#fff; font-weight:800; font-size:10px; }
.game-marker-oracle { display:block; margin-top:3px; max-height:112px; overflow:auto; color:#cbd0da; font-size:10px; line-height:1.35; white-space:pre-line; }
.game-card-mana { display:flex; flex-wrap:wrap; align-items:center; gap:2px; min-height:18px; }
.game-card-mana img { width:17px; height:17px; display:block; }
.game-card-mana.compact img { width:15px; height:15px; }
.game-card-mana.text-mana { font-weight:700; color:#ded8f5; font-size:10px; }
.game-marker-section { display:grid; gap:5px; padding-top:8px; border-top:1px solid rgba(255,255,255,.09); }
.game-marker-section-label { display:block; color:#9299a7; font-size:9px; line-height:1; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.game-marker-keywords { display:flex; flex-wrap:wrap; gap:5px; }
.game-keyword-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 7px 3px 4px; border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(255,255,255,.055); color:#eef0f5; font-size:10px; white-space:nowrap; }
.game-keyword-chip b { display:grid; place-items:center; min-width:25px; height:18px; padding:0 4px; border-radius:999px; background:rgba(156,124,255,.22); color:#cfc4ff; font-size:8px; letter-spacing:.04em; }
.game-keyword-chip.from-card b { background:rgba(105,169,255,.17); color:#b6d5ff; }
.game-keyword-chip.manual b { background:rgba(255,255,255,.1); color:#d9dde6; }
.game-marker-number-list { display:grid; gap:4px; }
.game-marker-number-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:25px; padding:3px 6px 3px 8px; border-radius:8px; background:rgba(255,255,255,.045); color:#e6e8ed; font-size:10px; }
.game-marker-stepper { display:inline-grid; grid-template-columns:24px minmax(22px,auto) 24px; align-items:center; gap:2px; }
.game-marker-stepper button { width:24px; height:22px; padding:0; border:1px solid rgba(255,255,255,.14); border-radius:6px; background:rgba(255,255,255,.06); color:#fff; font:800 13px/1 system-ui,sans-serif; cursor:pointer; }
.game-marker-stepper button:hover { background:rgba(156,124,255,.22); border-color:rgba(156,124,255,.45); }
.game-marker-stepper b { min-width:22px; text-align:center; color:#fff; }
.game-marker-stack { display:grid; gap:4px; padding-top:8px; border-top:1px solid rgba(255,255,255,.09); }
.game-marker-stack-card { display:grid; grid-template-columns:27px minmax(0,1fr); gap:7px; align-items:center; }
.game-marker-stack-card img,.game-marker-stack-placeholder { width:27px; height:38px; border-radius:4px; object-fit:cover; background:#11151a; }
.game-marker-stack-placeholder { display:grid; place-items:center; color:var(--muted); }
.game-marker-stack-card > span:last-child { min-width:0; }
.game-marker-stack-card b,.game-marker-stack-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-marker-stack-card b { color:#f2f3f7; font-size:10px; }
.game-marker-stack-card small { margin:1px 0 0 !important; font-size:9px; }
.game-marker-note { display:grid; gap:3px; padding:7px 8px; border-radius:8px; background:rgba(255,221,123,.06); border:1px solid rgba(255,221,123,.12); color:#d9d5c3; font-size:10px; white-space:pre-line; }
.game-marker-note b { color:#fff2b8; font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.game-marker-hover-hint { display:block; padding-top:3px; color:#777f8d; font-size:9px; text-align:center; }

.game-marker-editor-modal { width:min(1040px,calc(100vw - 32px)); padding:0; overflow:hidden; }
.game-marker-readonly-modal { width:min(720px,calc(100vw - 32px)); }
.game-marker-modal-head { position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 18px 12px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--panel) 96%,transparent); backdrop-filter:blur(10px); }
.game-marker-modal-head h2 { margin:4px 0 0; }
.game-marker-editor-modal > [data-marker-editor-body] { max-height:calc(100vh - 190px); overflow:auto; padding:15px 18px 4px; }
.game-marker-editor-modal > .modal-footer { margin:0; padding:13px 18px 17px; border-top:1px solid var(--border); background:var(--panel); }
.game-marker-editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.game-marker-editor-section { display:grid; align-content:start; gap:10px; min-width:0; padding:13px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(255,255,255,.025); }
.game-marker-editor-section.full,.game-marker-editor-cards { grid-column:1/-1; }
.game-marker-editor-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.game-marker-editor-section h3 { margin:3px 0 0; font-size:14px; }
.game-marker-source-label { padding:3px 6px; border:1px solid rgba(105,169,255,.2); border-radius:999px; color:#a9cbf8; font-size:9px; white-space:nowrap; }
.game-marker-search { position:relative; display:grid; gap:5px; }
.game-marker-search > span { color:var(--muted); font-size:10px; font-weight:700; }
.game-marker-search-box { display:flex; align-items:center; gap:7px; min-height:38px; padding:0 9px; border:1px solid var(--border); border-radius:9px; background:#0b0e12; }
.game-marker-search-box:focus-within { border-color:rgba(156,124,255,.6); box-shadow:0 0 0 2px rgba(156,124,255,.09); }
.game-marker-search-box > svg { width:15px; height:15px; color:#9586ca; flex:0 0 auto; }
.game-marker-search-box input { flex:1; min-width:0; padding:8px 0; border:0; outline:0; background:transparent; color:var(--text); }
.game-marker-search-state { color:var(--muted); font-size:9px; white-space:nowrap; }
.game-marker-search-results { position:absolute; z-index:8; top:calc(100% + 5px); left:0; right:0; max-height:260px; overflow:auto; padding:5px; border:1px solid var(--border); border-radius:10px; background:#101319; box-shadow:0 12px 28px rgba(0,0,0,.52); }
.game-marker-search-results button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 9px; border:0; border-radius:7px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.game-marker-search-results button:hover,.game-marker-search-results button:focus-visible { background:rgba(156,124,255,.13); }
.game-marker-search-results button > span:last-child { color:var(--muted); font-size:9px; }
.game-marker-search-results .game-keyword-chip { pointer-events:none; }
.game-marker-no-result { display:block; padding:8px; color:var(--muted); font-size:10px; }
.game-marker-card-stack-editor { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:7px; }
.game-marker-editor-card { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:9px; align-items:center; min-width:0; padding:7px; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:rgba(0,0,0,.12); }
.game-marker-editor-card > img,.game-marker-editor-card-placeholder { width:44px; height:61px; border-radius:5px; object-fit:cover; background:#0a0c0f; }
.game-marker-editor-card-placeholder { display:grid; place-items:center; border:1px dashed rgba(255,255,255,.14); color:var(--muted); }
.game-marker-editor-card-copy { display:flex; flex-direction:column; min-width:0; gap:2px; }
.game-marker-editor-card-copy b,.game-marker-editor-card-copy small,.game-marker-editor-card-copy > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-marker-editor-card-copy b { font-size:11px; color:#fff; }
.game-marker-editor-card-copy small,.game-marker-editor-card-copy > span { font-size:9px; color:var(--muted); }
.game-marker-editor-card-actions { display:flex; gap:3px; }
.game-marker-editor-card-actions .icon-button { min-width:27px; width:27px; height:27px; padding:0; }
.game-marker-empty { padding:8px 9px; border:1px dashed rgba(255,255,255,.1); border-radius:8px; color:var(--muted); font-size:10px; }
.game-marker-empty.prominent { padding:14px; text-align:center; }
.game-marker-suggestions,.game-marker-current-properties { display:grid; gap:6px; }
.game-marker-chip-picker { display:flex; flex-wrap:wrap; gap:5px; }
.game-marker-chip-picker > button { display:inline-flex; align-items:center; gap:4px; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; }
.game-marker-chip-picker > button > span:last-child { display:grid; place-items:center; width:18px; height:18px; margin-left:-9px; border-radius:999px; background:#ddd6ff; color:#21193d; font-size:11px; font-weight:900; }
.game-marker-chip-picker.current > button > span:last-child { background:#382f48; color:#eee7ff; }
.game-marker-preset-row { display:flex; flex-wrap:wrap; gap:5px; }
.game-marker-preset-row button { padding:5px 8px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(255,255,255,.04); color:#e5e7eb; font-size:10px; cursor:pointer; }
.game-marker-preset-row button:hover { border-color:rgba(156,124,255,.42); background:rgba(156,124,255,.1); }
.game-marker-preset-row.compact { margin-top:6px; }
.game-marker-counter-group { display:grid; gap:7px; padding:9px; border:1px solid rgba(255,255,255,.075); border-radius:10px; background:rgba(0,0,0,.1); }
.game-marker-pt-counter-builder { display:grid; grid-template-columns:minmax(86px,1fr) auto minmax(86px,1fr) minmax(112px,auto); gap:8px; align-items:end; }
.game-marker-pt-counter-builder > strong { align-self:center; padding-top:15px; color:var(--muted); font-size:15px; }
.game-marker-pt-part { display:grid; gap:4px; }
.game-marker-pt-part small { color:var(--muted); font-size:9px; font-weight:700; }
.game-marker-pt-part .game-marker-stepper { justify-self:start; }
.game-marker-pt-add { min-height:31px; white-space:nowrap; }
@media (max-width:760px) { .game-marker-pt-counter-builder { grid-template-columns:1fr auto 1fr; } .game-marker-pt-add { grid-column:1/-1; } }
.game-marker-number-editor { display:grid; gap:5px; }
.game-marker-number-edit-row { display:grid; grid-template-columns:minmax(0,1fr) auto 28px; align-items:center; gap:7px; min-height:31px; padding:4px 5px 4px 8px; border-radius:8px; background:rgba(0,0,0,.12); }
.game-marker-number-edit-row > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.game-marker-stepper.edit { grid-template-columns:27px 28px 27px; }
.game-marker-stepper.edit button { width:27px; height:25px; }
.game-marker-custom-number { display:flex; gap:6px; }
.game-marker-custom-number input { flex:1; min-width:0; }
.game-marker-editor-section textarea { width:100%; resize:vertical; }
.game-marker-readonly { padding:14px 2px 2px; }
.game-marker-readonly .game-marker-hover-shell { font-size:12px; }

@media (max-width:760px) {
  .game-board-marker-popover { width:min(92vw,470px); }
  .game-marker-hero { --game-marker-card-preview-width:118px; grid-template-columns:var(--game-marker-card-preview-width) minmax(0,1fr); }
  .game-marker-card-image { width:var(--game-marker-card-preview-width); }
  .game-marker-editor-grid { grid-template-columns:1fr; }
  .game-marker-editor-section.full,.game-marker-editor-cards { grid-column:auto; }
  .game-marker-editor-modal > [data-marker-editor-body] { max-height:calc(100vh - 175px); padding:11px; }
  .game-marker-modal-head,.game-marker-editor-modal > .modal-footer { padding-left:12px; padding-right:12px; }
}

/* v0.9.30 Karteninfo 2.1: viewport-level preview escapes board/splitter clipping. */
.game-marker-preview-portal {
  position:fixed;
  z-index:70;
  width:clamp(390px,42vw,590px);
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px);
  overflow:auto;
  padding:0;
  border:1px solid rgba(255,255,255,.2);
  border-radius:15px;
  background:rgba(9,11,15,.985);
  color:var(--text);
  box-shadow:0 18px 52px rgba(0,0,0,.64),0 0 0 1px rgba(156,124,255,.06);
  backdrop-filter:blur(12px);
  pointer-events:auto;
  scrollbar-width:thin;
}
.game-marker-preview-portal[hidden] { display:none !important; }
.game-marker-preview-portal.is-pinned { border-color:rgba(255,221,123,.5); box-shadow:0 18px 52px rgba(0,0,0,.68),0 0 0 2px rgba(255,221,123,.08); }
.game-marker-preview-head {
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 9px 8px 12px;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(12,14,19,.96);
  backdrop-filter:blur(10px);
}
.game-marker-preview-title { color:#d8dbe2; font-size:10px; font-weight:800; letter-spacing:.04em; }
.game-marker-preview-actions { display:inline-flex; align-items:center; justify-content:flex-end; gap:5px; }
.game-marker-preview-actions .button.compact { min-height:27px; padding:4px 7px; gap:4px; font-size:10px; }
.game-marker-preview-actions .icon-button { width:28px; min-width:28px; height:28px; min-height:28px; }
.game-marker-preview-content { padding:12px; }
.game-marker-card-image-button {
  position:relative;
  display:block;
  width:var(--game-marker-card-preview-width,178px);
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  cursor:zoom-in;
  text-align:left;
}
.game-marker-card-image-button:focus-visible { outline:2px solid rgba(156,124,255,.9); outline-offset:3px; }
.game-marker-image-zoom {
  position:absolute;
  right:6px;
  bottom:6px;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(5,6,8,.82);
  color:#fff;
  opacity:.75;
  box-shadow:0 3px 10px rgba(0,0,0,.45);
  transition:opacity .12s ease, transform .12s ease;
}
.game-marker-card-image-button:hover .game-marker-image-zoom { opacity:1; transform:scale(1.06); }
.game-marker-image-zoom .ui-icon { width:14px; height:14px; }

.game-card-lightbox-backdrop { z-index:82; }
.game-card-lightbox {
  --game-card-lightbox-x:0px;
  --game-card-lightbox-y:0px;
  width:min(1120px,calc(100vw - 30px));
  height:min(900px,calc(100vh - 28px));
  max-height:calc(100vh - 28px);
  padding:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  transform:translate(var(--game-card-lightbox-x),var(--game-card-lightbox-y));
}
.game-card-lightbox-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border-bottom:1px solid var(--border); cursor:grab; touch-action:none; user-select:none; }
.game-card-lightbox-head:active,.game-card-lightbox.is-dragging .game-card-lightbox-head { cursor:grabbing; }
.game-card-lightbox-head strong,.game-card-lightbox-head small { display:block; }
.game-card-lightbox-head small { margin-top:2px; color:var(--faint); font-size:10px; }
.game-card-lightbox-body { min-height:0; overflow:hidden; display:grid; place-items:center; padding:14px; background:#050608; }
.game-card-lightbox-image { display:block; width:auto; height:auto; max-width:min(92vw,760px); max-height:100%; border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.62); }
.game-card-lightbox-stack { display:flex; gap:7px; overflow:auto; padding:8px 10px 10px; border-top:1px solid var(--border); }
.game-card-lightbox-stack button { display:flex; align-items:center; gap:7px; flex:0 0 auto; max-width:190px; padding:5px 7px; border:1px solid var(--border); border-radius:9px; background:#11151b; color:var(--text); cursor:pointer; }
.game-card-lightbox-stack button.active { border-color:rgba(156,124,255,.72); background:rgba(156,124,255,.13); }
.game-card-lightbox-stack img { width:28px; border-radius:3px; }
.game-card-lightbox-stack span { min-width:0; white-space:normal; overflow-wrap:anywhere; font-size:10px; line-height:1.2; }

/* German/localized search results: physical-card name first, Oracle name secondary. */
.game-marker-search-results button { grid-template-columns:auto minmax(0,1fr) auto; align-items:center; }
.game-marker-search-results button > img { width:32px; max-height:45px; object-fit:cover; border-radius:4px; box-shadow:0 2px 7px rgba(0,0,0,.35); }
.game-marker-search-result-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
.game-marker-search-result-copy b,.game-marker-search-result-copy small { max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:left; }
.game-marker-search-result-copy small { color:var(--faint); font-size:9px; }

@media (max-height:760px) and (min-width:681px) {
  .game-marker-hero { --game-marker-card-preview-width:148px; }
  .game-marker-oracle { max-height:96px; }
  .game-card-lightbox-image { max-height:100%; }
}

@media (max-width:680px) {
  .game-marker-preview-portal { width:calc(100vw - 20px); max-width:none; }
  .game-marker-preview-head { align-items:flex-start; }
  .game-marker-preview-title { display:none; }
  .game-marker-preview-actions { width:100%; }
  .game-marker-preview-actions .button.compact { flex:1 1 auto; }
  .game-marker-hero { --game-marker-card-preview-width:108px; grid-template-columns:var(--game-marker-card-preview-width) minmax(0,1fr); }
  .game-marker-card-image-button,.game-marker-card-image { width:var(--game-marker-card-preview-width); }
}
.game-marker-search-results button { display:grid; justify-content:stretch; }

/* v0.9.31 Karteninfo 2.2: arbitrary structured power/toughness counters. */

/* v0.9.32 Karteninfo 2.3: at-a-glance status halo around the board info marker. */
.game-marker-status-halo { position:absolute; inset:0; pointer-events:none; overflow:visible; }
.game-marker-halo-badge {
  position:absolute;
  z-index:2;
  display:grid;
  place-items:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border:1px solid rgba(255,255,255,.66);
  border-radius:999px;
  background:rgba(10,12,17,.94);
  color:#f4f5f7;
  box-shadow:0 2px 7px rgba(0,0,0,.55);
  font:800 8px/1 system-ui,sans-serif;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.game-marker-halo-pt {
  left:50%;
  top:-17px;
  transform:translateX(-50%);
  min-width:30px;
  color:#fff1bd;
  border-color:rgba(255,221,123,.72);
  background:rgba(54,44,19,.95);
}
.game-marker-halo-keyword.slot-1 {
  left:-21px;
  top:50%;
  transform:translateY(-50%);
  color:#dcd3ff;
  border-color:rgba(156,124,255,.68);
  background:rgba(39,28,67,.96);
}
.game-marker-halo-keyword.slot-2 {
  right:-21px;
  top:50%;
  transform:translateY(-50%);
  color:#dcd3ff;
  border-color:rgba(156,124,255,.68);
  background:rgba(39,28,67,.96);
}
.game-marker-halo-more {
  left:50%;
  bottom:-16px;
  transform:translateX(-50%);
  color:#cfd4dd;
  border-color:rgba(255,255,255,.35);
}
.game-marker-halo-counter {
  left:-14px;
  bottom:-14px;
  color:#bfe8ff;
  border-color:rgba(105,169,255,.58);
  background:rgba(20,44,61,.96);
}
.game-marker-halo-tracker {
  right:-14px;
  bottom:-14px;
  color:#c9f5d6;
  border-color:rgba(112,210,145,.56);
  background:rgba(19,52,34,.96);
}
.game-board-marker-count { right:-16px; top:-16px; }
.game-board-marker:hover .game-marker-halo-badge,
.game-board-marker:focus-visible .game-marker-halo-badge,
.game-board-marker.is-pinned .game-marker-halo-badge { box-shadow:0 2px 9px rgba(0,0,0,.68); }

/* v0.9.33 Game View quick tools: middle-click menu and persistent board tools. */
.game-view-quick-menu {
  position:fixed;
  z-index:78;
  width:220px;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:6px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(10,12,16,.97);
  box-shadow:0 16px 44px rgba(0,0,0,.62),0 0 0 1px rgba(156,124,255,.05);
  backdrop-filter:blur(12px);
  color:var(--text);
}
.game-view-quick-menu[hidden] { display:none !important; }
.game-view-quick-menu button {
  width:100%;
  min-height:34px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:12px;
  text-align:left;
  cursor:pointer;
}
.game-view-quick-menu button:hover,
.game-view-quick-menu button:focus-visible {
  outline:none;
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
}
.game-view-quick-menu button.active {
  border-color:rgba(156,124,255,.48);
  background:rgba(156,124,255,.14);
  color:#e5deff;
}
.game-view-quick-menu button:disabled { opacity:.38; cursor:default; }
.game-view-quick-menu button .ui-icon { width:15px; height:15px; flex:0 0 auto; }
.game-view-quick-menu-divider { height:1px; margin:3px 4px; background:rgba(255,255,255,.12); }

/* v0.9.34 Karteninfo 2.5: readable stack navigation inside the normal preview. */
.game-marker-card-nav-row {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.game-marker-card-nav {
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  color:#d9dce3;
  font-size:9px;
}
.game-marker-card-nav button {
  display:grid;
  place-items:center;
  width:23px;
  height:21px;
  padding:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:6px;
  background:rgba(255,255,255,.055);
  color:#fff;
  font:800 16px/1 system-ui,sans-serif;
  cursor:pointer;
}
.game-marker-card-nav button:hover,.game-marker-card-nav button:focus-visible {
  border-color:rgba(156,124,255,.55);
  background:rgba(156,124,255,.18);
  outline:none;
}
.game-marker-card-nav b { min-width:27px; text-align:center; font-size:9px; }
.game-marker-stack-card {
  width:100%;
  padding:4px 5px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.game-marker-stack-card:hover,.game-marker-stack-card:focus-visible {
  border-color:rgba(156,124,255,.32);
  background:rgba(156,124,255,.08);
  outline:none;
}
.game-marker-stack-card.active {
  border-color:rgba(156,124,255,.58);
  background:rgba(156,124,255,.13);
}

/* v0.9.36 gameplay life totals: compact two-half control integrated into the existing player HUD. */
.game-life-control {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  height:34px;
  margin-left:3px;
  align-self:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  overflow:hidden;
  background:rgba(0,0,0,.42);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
.game-life-control strong {
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  min-width:0;
  padding:0 20px;
  text-align:center;
  font-size:24px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
  pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.game-life-control.editable { min-width:82px; }
.game-life-half {
  position:absolute;
  inset-block:0;
  width:50%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:transparent;
  cursor:pointer;
  z-index:1;
}
.game-life-down { left:0; }
.game-life-up { right:0; }
.game-life-half:hover { background:rgba(255,255,255,.08); }
.game-life-half:active { background:rgba(255,255,255,.15); }
.game-life-half span { position:absolute; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.48); font-size:13px; font-weight:900; }
.game-life-down span { left:6px; }
.game-life-up span { right:6px; }
body.game-view-active .board-player-line { align-items:center; }
body.game-view-active .game-life-control { height:36px; min-width:62px; border-radius:10px; }
body.game-view-active .game-life-control.editable { min-width:88px; }
body.game-view-active .game-life-control strong { font-size:27px; }
body.game-view-active .board-grid[data-hud-size="compact"] .game-life-control { height:32px; }
body.game-view-active .board-grid[data-hud-size="compact"] .game-life-control strong { font-size:24px; }
body.game-view-active .board-grid[data-hud-size="large"] .game-life-control { height:40px; }
body.game-view-active .board-grid[data-hud-size="large"] .game-life-control strong { font-size:31px; }
@media (max-width:760px) {
  .game-life-control.editable { min-width:76px; }
  body.game-view-active .game-life-control.editable { min-width:78px; }
  body.game-view-active .game-life-control strong { font-size:24px; }
}


/* v0.9.39 marker-drag + HUD alignment hardening. */
body.game-view-marker-dragging,
body.game-view-marker-dragging * {
  user-select:none !important;
  -webkit-user-select:none !important;
}
body.game-view-marker-dragging .game-board-marker.is-dragging {
  cursor:grabbing !important;
  z-index:70;
}
body.game-view-active .board-player-line > .board-player,
body.game-view-active .board-player-line > .game-life-control,
body.game-view-active .board-player-line > .game-player-away-status,
body.game-view-active .board-player-line > .player-mini-media,
body.game-view-active .board-player-line > .player-mini-media-placeholder {
  align-self:center;
}
body.game-view-active .board-player-line .player-mini-media,
body.game-view-active .board-player-line .player-mini-media-placeholder {
  margin-top:0;
  margin-bottom:0;
}

/* v0.9.40 Camera Calibration 1.0 -------------------------------------------------
   The original <video> stays alive as the WebRTC decoder/texture source.  A
   calibrated WebGL canvas is painted above it so rotation/perspective never
   changes the publisher or SFU media path. */
.board-video-stage, .game-seat-camera, .player-mini-media { position:relative; }
.video-calibration-source-hidden { opacity:0 !important; }
.video-calibrated-output { position:absolute; inset:0; width:100%; height:100%; display:block; background:#050608; pointer-events:none; z-index:1; opacity:0; }
.video-calibrated-output.is-ready { opacity:1; }
body.game-view-active .board-tile > [data-board-role-slot="board"] > .board-video-stage.media-role-board > .video-calibrated-output {
  transform:rotate(var(--gv-board-rotation,0deg)) scale(var(--gv-board-scale,1));
  transform-origin:50% 50%;
  will-change:transform;
}
.calibration-button { white-space:nowrap; }

.video-calibration-overlay { position:fixed; inset:0; z-index:10050; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.78); backdrop-filter:blur(7px); }
.video-calibration-dialog { width:min(1320px,96vw); max-height:94vh; overflow:auto; border:1px solid var(--border); border-radius:18px; background:var(--panel); box-shadow:0 28px 90px rgba(0,0,0,.58); padding:18px; }
.video-calibration-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
.video-calibration-head h2 { margin:0 0 4px; }
.video-calibration-head p { margin:0; color:var(--muted); }
.video-calibration-toolbar { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:12px; }
.video-calibration-toolbar label { display:flex; align-items:center; gap:8px; }
.video-calibration-toolbar select { min-width:92px; }
.video-calibration-custom-aspect { gap:5px !important; }
.video-calibration-custom-aspect input { width:76px; }
.video-calibration-aspect-readout { min-width:110px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.video-calibration-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start; }
.video-calibration-pane { min-width:0; display:grid; gap:7px; }
.video-calibration-pane-head { min-height:24px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:10px; }
.video-calibration-pane-head strong { color:var(--text); font-size:11px; }
.video-calibration-stage { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:#050608; touch-action:none; user-select:none; }
.video-calibration-output-stage { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:#050608; display:grid; place-items:center; }
.video-calibration-output-stage canvas { width:100%; height:100%; display:block; }
.video-calibration-output-wait { position:absolute; inset:0; display:grid; place-items:center; color:var(--faint); font-size:11px; background:#050608; }
.video-calibration-output-wait[hidden] { display:none; }
.video-calibration-stage canvas { width:100%; height:100%; display:block; }
.video-calibration-stage > svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.video-calibration-stage polygon { fill:rgba(89,168,255,.10); stroke:rgba(126,196,255,.95); stroke-width:5; vector-effect:non-scaling-stroke; stroke-dasharray:10 7; }
.video-calibration-stage.perspective-disabled polygon { opacity:.32; }
.video-calibration-point { position:absolute; z-index:4; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:3px solid #fff; background:#3188e8; box-shadow:0 2px 10px rgba(0,0,0,.65); cursor:grab; touch-action:none; }
.video-calibration-point:active { cursor:grabbing; transform:scale(1.12); }
.video-calibration-point:disabled { opacity:.38; cursor:not-allowed; }
.video-calibration-corner-labels { position:absolute; inset:0; pointer-events:none; color:#fff; font-size:11px; font-weight:800; text-shadow:0 1px 3px #000; }
.video-calibration-corner-labels span { position:absolute; padding:2px 5px; border-radius:6px; background:rgba(0,0,0,.62); }
.video-calibration-corner-labels span:nth-child(1){left:8px;top:8px}.video-calibration-corner-labels span:nth-child(2){right:8px;top:8px}.video-calibration-corner-labels span:nth-child(3){right:8px;bottom:8px}.video-calibration-corner-labels span:nth-child(4){left:8px;bottom:8px}
.video-calibration-help { margin:10px 2px 0; }
.video-calibration-actions { display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center; margin-top:14px; }
@media (max-width:800px){.video-calibration-overlay{padding:8px}.video-calibration-dialog{padding:12px}.video-calibration-workspace{grid-template-columns:1fr}.video-calibration-actions{grid-template-columns:1fr 1fr}.video-calibration-actions>span{display:none}.video-calibration-actions .primary{grid-column:2}.video-calibration-pane-head span{display:none}}
/* In setup cards the stage also contains status/meta rows below the video. Keep
   the calibrated surface on the video viewport instead of covering controls. */
body:not(.game-view-active) .board-video-stage > .video-calibrated-output { inset:0 0 auto 0; height:auto; aspect-ratio:16/9; }
body.game-view-active .board-video-stage > .video-calibrated-output { inset:0; height:100%; aspect-ratio:auto; }
.board-video-stage video.video-calibration-source-hidden:hover ~ .board-video-hint { opacity:1; }

/* v0.9.41 Game HUD media quick controls + browser-native video chrome hardening. */
video[disablepictureinpicture] {
  -webkit-user-select:none;
  user-select:none;
}
.game-hud-media-toggles {
  display:inline-grid;
  grid-template-columns:30px;
  grid-template-rows:1fr 1fr;
  width:30px;
  height:30px;
  gap:2px;
  flex:0 0 auto;
  align-self:center;
}
.game-hud-media-toggle {
  display:grid;
  place-items:center;
  min-width:0;
  min-height:0;
  width:30px;
  height:auto;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:6px;
  background:rgba(0,0,0,.42);
  color:rgba(255,255,255,.9);
  cursor:pointer;
}
.game-hud-media-toggle:hover:not(:disabled) { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); }
.game-hud-media-toggle:active:not(:disabled) { background:rgba(255,255,255,.2); }
.game-hud-media-toggle:disabled { opacity:.38; cursor:not-allowed; }
.game-hud-media-toggle[data-paused="1"],
.game-hud-media-toggle[data-muted="1"] { color:#ff9d9d; background:rgba(120,20,28,.42); border-color:rgba(255,120,128,.28); }
.game-hud-media-toggle .ui-icon { width:13px; height:13px; }
body.game-view-active .board-grid[data-hud-size="compact"] .game-hud-media-toggles {
  display:flex;
  width:62px;
  height:30px;
  gap:2px;
}
body.game-view-active .board-grid[data-hud-size="compact"] .game-hud-media-toggle {
  width:30px;
  height:30px;
  border-radius:7px;
}
body.game-view-active .board-grid[data-hud-size="large"] .game-hud-media-toggles { height:30px; }
body.game-view-active .board-player-line > .game-hud-media-toggles { align-self:center; }

/* v0.9.51 setup/player-tile media alignment: keep the own Facecam directly
   coupled to the quick video/mic controls. Scanner stays in the right-side
   media tools next to the audio meter. */
.game-player-face-controls {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  white-space: nowrap;
}
body:not(.game-view-active) .board-player-line > .game-player-face-controls {
  align-self: center;
}
body:not(.game-view-active) .game-player-face-controls .player-mini-media,
body:not(.game-view-active) .game-player-face-controls .player-mini-media-placeholder {
  margin: 0;
}
body.game-view-active .game-player-face-controls { gap: 4px; }


/* v0.9.45 Game View HUD visibility polish. */
body.game-view-active .toast-region {
  top:18px;
  right:auto;
  bottom:auto;
  left:50%;
  transform:translateX(-50%);
  width:min(420px, calc(100vw - 32px));
  z-index:10100;
}
@media (max-width:760px) {
  body.game-view-active .toast-region { top:10px; width:min(380px, calc(100vw - 20px)); }
}

/* v0.9.52 setup-seat interaction consistency.
   The setup header mirrors the active player header: own video/mic quick
   controls + Facecam stay directly beside the name. Scanner + level remain in
   the right-side media tools. The large empty-seat surface is the player picker. */
.game-seat-player-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.game-seat-player-line > strong {
  min-width: 0;
  flex: 0 1 auto;
}
.game-seat-player-line .game-player-face-controls {
  flex: 0 0 auto;
}
.game-seat.occupied-seat .own-audio .voice-hud-button {
  display: none;
}
button.game-seat-empty-action {
  width: 100%;
  font: inherit;
  background: transparent;
  cursor: pointer;
  appearance: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
button.game-seat-empty-action:hover:not(:disabled),
button.game-seat-empty-action:focus-visible:not(:disabled) {
  border-color: rgba(156,124,255,.45);
  background: rgba(156,124,255,.055);
  color: var(--text);
}
button.game-seat-empty-action:disabled {
  cursor: default;
  opacity: .72;
}


/* v0.9.60 room-scoped media diagnostics. */
.room-diagnostics-modal { width:min(980px,calc(100vw - 32px)); }
.room-diagnostics-modal .card-header { align-items:flex-start; gap:16px; }
.room-diagnostics-log {
  width:100%;
  min-height:min(58vh,560px);
  margin-top:12px;
  resize:vertical;
  font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  white-space:pre;
  overflow:auto;
}
.room-diagnostics-actions { justify-content:space-between; }
@media (max-width:760px) {
  .room-diagnostics-modal { width:100%; }
  .room-diagnostics-log { min-height:52vh; font-size:10px; }
}

/* v0.9.61 Presence: transient room attendance is visually separate from
   persistent membership and game participation. Presence changes are patched
   in place; these styles must not change video geometry or recreate media. */
.badge.muted,
.room-presence-badge.muted {
  color: var(--faint);
  border-color: var(--border-soft);
  background: rgba(255,255,255,.025);
}
.room-presence-badge,
.room-participation-badge { flex: 0 0 auto; }
.room-online-count {
  color: var(--success);
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}
.game-unseated-member { display: inline-flex; align-items: center; gap: 4px; }
.game-seat.user-offline .room-presence-badge,
.game-unseated-member.user-offline .room-presence-badge { opacity: .88; }
.board-tile .room-presence-badge { font-size: 9px; padding: 2px 6px; }
.member-management-row.user-offline > div:first-child strong { color: #c4cbd1; }

/* v0.9.62: one device rescan belongs to the Media & Devices status row.
   Video and microphone sections deliberately do not duplicate this action. */
.room-media-summary-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.room-media-summary-actions .icon-button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
@media (max-width:760px) {
  .room-media-summary-actions { width: 100%; justify-content: space-between; }
}

/* v0.9.62 persistent Room session: internal navigation keeps Presence and
   remote audio alive. The shell control is intentionally absent on the Room
   page itself, where the full controls already exist. */
.sidebar-room-control {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: rgba(139,108,232,.07);
}
.sidebar-room-control.hidden { display: none; }
.sidebar-room-control-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sidebar-room-control-head .sidebar-label { min-width: 0; flex: 1 1 auto; }
.sidebar-room-control-head strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.sidebar-room-control-head .sidebar-label span { display: block; margin-top: 1px; color: var(--muted); font-size: 9px; }
.sidebar-room-control-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(85,201,145,.10); }
.sidebar-room-control-head .icon-button,
.sidebar-room-control-actions .icon-button { width: 30px; min-width: 30px; height: 30px; min-height: 30px; border-radius: 8px; }
.sidebar-room-control-actions { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; }
.sidebar-room-control-actions .icon-button { width: 100%; min-width: 0; }
body.sidebar-collapsed .sidebar-room-control { padding: 6px; }
body.sidebar-collapsed .sidebar-room-control-head { justify-content: center; }
body.sidebar-collapsed .sidebar-room-control-head .sidebar-room-control-dot,
body.sidebar-collapsed .sidebar-room-control-head .sidebar-label { display: none; }
body.sidebar-collapsed .sidebar-room-control-actions { grid-template-columns: 1fr; }
body.sidebar-collapsed .sidebar-room-control-head .icon-button,
body.sidebar-collapsed .sidebar-room-control-actions .icon-button { width: 100%; }
@media (max-width:760px) {
  body.sidebar-collapsed .sidebar-room-control { padding: 9px; }
  body.sidebar-collapsed .sidebar-room-control-head { justify-content: flex-start; }
  body.sidebar-collapsed .sidebar-room-control-head .sidebar-room-control-dot { display: block; }
  body.sidebar-collapsed .sidebar-room-control-head .sidebar-label { display: block; }
  body.sidebar-collapsed .sidebar-room-control-actions { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

/* v0.9.63 targeted subscriber recovery: only broken tiles expose a compact
   reconnect action. Healthy streams and intentional privacy/source-offline
   states stay visually quiet. */
.rtc-reconnect-button {
  position:absolute;
  right:8px;
  bottom:38px;
  z-index:5;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(12,15,18,.9);
  color:var(--warning);
  cursor:pointer;
  box-shadow:0 5px 18px rgba(0,0,0,.32);
  backdrop-filter:blur(6px);
}
.rtc-reconnect-button[hidden] { display:none !important; }
.rtc-reconnect-button:disabled { opacity:.55; cursor:progress; }
.rtc-reconnect-button:hover:not(:disabled),
.rtc-reconnect-button:focus-visible:not(:disabled) { border-color:rgba(255,255,255,.42); color:var(--text); outline:none; }
.rtc-reconnect-button .ui-icon { width:14px; height:14px; }
.voice-status-indicator[data-rtc-reconnect] {
  position:static;
  right:auto;
  bottom:auto;
  width:23px;
  height:23px;
  min-width:23px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(12,15,18,.78);
  cursor:pointer;
}
body.game-view-active .board-tile .rtc-reconnect-button { bottom:10px; right:10px; }

/* v0.9.68 R20-R29 + R46: unified conversation, mirrored HUD, visual layouts, deck colors. */
.room-conversation { overflow:visible; }
.room-conversation-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.room-conversation-head h2 { margin:0 0 3px; }
.room-conversation-head p { margin:0; color:var(--muted); }
.room-media-check { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 14px; padding:11px 13px; border:1px solid rgba(156,124,255,.2); border-radius:12px; background:rgba(156,124,255,.065); }
.room-media-check strong,.room-media-check p { display:block; margin:0; }
.room-media-check p { margin-top:2px; color:var(--muted); font-size:11px; }
.room-media-check-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; flex:0 0 auto; }
.conversation-participant-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; }
.room-conversation > .conversation-participant-grid { grid-template-columns:repeat(auto-fill,minmax(280px,390px)); justify-content:start; }
.conversation-participant { position:relative; min-width:0; display:grid; grid-template-columns:minmax(82px,32%) minmax(0,1fr) auto; align-items:center; gap:11px; padding:9px; border:1px solid rgba(255,255,255,.075); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.conversation-participant:hover { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.035); }
.conversation-participant.seat-draggable { cursor:grab; }
.conversation-participant.seat-draggable:active,.conversation-participant.seat-drag-source { cursor:grabbing; }
.conversation-participant.seat-missing-board-source { cursor:grab; }
.conversation-participant.seat-drag-source { opacity:.56; transform:scale(.985); }
body.game-seat-dragging .game-seat.empty-seat[data-seat-drop-target] { border-color:rgba(156,124,255,.4); box-shadow:inset 0 0 0 1px rgba(156,124,255,.12); }
body.game-seat-dragging .game-seat.empty-seat[data-seat-drop-target] .game-seat-empty { background:rgba(156,124,255,.06); }
.game-seat.empty-seat.seat-drop-active { border-color:rgba(173,147,255,.88) !important; box-shadow:0 0 0 2px rgba(156,124,255,.2),inset 0 0 36px rgba(156,124,255,.08) !important; }
.game-seat.empty-seat.seat-drop-active .game-seat-empty { background:rgba(156,124,255,.14) !important; }
.game-seat.empty-seat.seat-drop-saving { opacity:.68; pointer-events:none; }
.conversation-face { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:11px; background:#0a0d11; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
.conversation-face video,.conversation-face > img,.conversation-face-fallback { position:absolute; inset:0; width:100%; height:100%; }
.conversation-face video,.conversation-face > img { object-fit:cover; }
.conversation-face-fallback { display:none; place-items:center; background:radial-gradient(circle at 50% 35%,rgba(156,124,255,.15),rgba(6,8,11,.96)); }
.conversation-face.avatar-only .conversation-face-fallback,.conversation-face.avatar-only > .player-avatar { display:grid; }
.conversation-face.avatar-only { display:grid; place-items:center; }
.conversation-face.avatar-only > .player-avatar { width:54px; height:54px; font-size:25px; }
.conversation-participant.video-hidden-local .conversation-face video,.conversation-face.video-hidden-local video,.conversation-participant.video-hidden-local .conversation-face > img,.conversation-face.video-hidden-local > img { visibility:hidden; }
.conversation-participant.video-hidden-local .conversation-face-fallback,.conversation-face.video-hidden-local .conversation-face-fallback { display:grid; }
.conversation-face-fallback .conversation-avatar { width:54px; height:54px; font-size:25px; }
.conversation-person-copy { min-width:0; }
.conversation-person-name { display:flex; align-items:center; gap:7px; min-width:0; }
.conversation-person-name strong { min-width:0; overflow-wrap:anywhere; font-size:14px; line-height:1.15; }
.conversation-person-copy > span { display:block; margin-top:2px; color:var(--muted); font-size:10px; }
.conversation-badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.conversation-role,.conversation-presence,.conversation-muted { display:inline-flex; align-items:center; gap:3px; min-height:20px; padding:2px 6px; border-radius:999px; background:rgba(255,255,255,.055); color:var(--muted); font-size:9px; font-weight:750; }
.conversation-role.player { background:rgba(156,124,255,.13); color:#d9d1ff; }
.conversation-presence.online { color:#a9e7bf; }
.conversation-muted { color:#f3c8bd; }
.conversation-voice-level { width:38px; height:5px; min-width:28px; opacity:.62; }
.conversation-voice-level.unavailable { display:none; }
.conversation-mixer { position:relative; align-self:start; }
.conversation-mixer > summary { list-style:none; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:var(--muted); cursor:pointer; opacity:.45; }
.conversation-participant:hover .conversation-mixer > summary,.conversation-mixer[open] > summary { opacity:1; background:rgba(255,255,255,.06); color:var(--text); }
.conversation-mixer > summary::-webkit-details-marker { display:none; }
.conversation-mixer-popover { position:absolute; z-index:50; top:35px; right:0; width:min(310px,80vw); padding:10px; border:1px solid var(--border); border-radius:12px; background:rgba(12,15,20,.98); box-shadow:0 14px 34px rgba(0,0,0,.5); }
.conversation-mixer-row,.conversation-own-actions { display:grid; gap:8px; }
.conversation-mixer-row label { display:grid; grid-template-columns:auto minmax(110px,1fr) auto; gap:7px; align-items:center; font-size:10px; color:var(--muted); }
.conversation-mixer-row input { min-width:0; }
.conversation-mixer-row strong { color:var(--text); font-size:10px; white-space:nowrap; }
.conversation-action { display:flex; align-items:center; gap:7px; min-height:30px; padding:5px 8px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.035); color:var(--text); cursor:pointer; font-size:10px; }
.conversation-action:hover { background:rgba(255,255,255,.075); }
.conversation-own-actions .game-hud-media-toggles { display:flex; gap:6px; }

body.game-view-active [data-room-conversation-host] { display:none; }
.game-conversation-panel { display:none; }
body.game-view-active .spectator-presence-pill { position:fixed; z-index:66; left:0; top:50%; right:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:38px; min-height:52px; padding:8px 6px 8px 5px; border:1px solid rgba(255,255,255,.13); border-left:0; border-radius:0 13px 13px 0; background:rgba(8,10,14,.78); color:#f0f2f6; box-shadow:5px 8px 22px rgba(0,0,0,.34); backdrop-filter:blur(10px); cursor:pointer; transform:translate(-5px,-50%); transition:transform .14s ease,background .14s ease,border-color .14s ease; }
body.game-view-active .spectator-presence-pill:hover,body.game-view-active .spectator-presence-pill:focus-visible,body.game-view-active .spectator-presence-pill.active { transform:translate(0,-50%); background:rgba(14,17,23,.94); border-color:rgba(255,255,255,.22); }
body.game-view-active .spectator-presence-pill > .ui-icon { width:18px; height:18px; }
body.game-view-active .spectator-presence-pill > strong { min-width:20px; height:20px; display:grid; place-items:center; border-radius:999px; background:rgba(156,124,255,.18); color:#e3ddff; font-size:10px; }
body:not(.game-view-active) .spectator-presence-pill { display:none; }
.spectator-pill-avatars { display:flex; flex-direction:column; align-items:center; padding-top:1px; }
.spectator-pill-avatar { width:19px !important; height:19px !important; margin-top:-5px; border:1px solid rgba(255,255,255,.35); font-size:8px !important; }
body.game-view-active.game-view-videochat .game-conversation-panel { position:fixed; z-index:65; display:flex; flex-direction:column; gap:8px; overflow:auto; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:rgba(8,10,14,.94); box-shadow:0 18px 48px rgba(0,0,0,.55); backdrop-filter:blur(18px); }
body.game-view-active.game-view-videochat[data-game-conversation-density="small"] .game-conversation-panel { right:12px; bottom:58px; width:min(340px,calc(100vw - 24px)); max-height:48vh; padding:9px; }
body.game-view-active.game-view-videochat[data-game-conversation-density="medium"] .game-conversation-panel { right:16px; bottom:62px; width:min(620px,calc(100vw - 32px)); max-height:68vh; padding:12px; }
body.game-view-active.game-view-videochat[data-game-conversation-density="large"] .game-conversation-panel { inset:52px 4vw 62px; padding:16px; }
.game-conversation-panel-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:32px; background:inherit; cursor:grab; touch-action:none; }
.game-conversation-panel-head:active,.game-conversation-panel.is-dragging .game-conversation-panel-head { cursor:grabbing; }
.game-conversation-panel-head > strong { display:inline-flex; align-items:center; gap:6px; }
.game-conversation-panel-head > strong .ui-icon { width:15px; height:15px; }
body.game-view-active.game-view-videochat .game-conversation-panel.user-positioned { right:auto !important; bottom:auto !important; }
body.game-view-active.game-view-videochat .game-conversation-panel.is-dragging { box-shadow:0 22px 56px rgba(0,0,0,.68),0 0 0 1px rgba(156,124,255,.12); }
.conversation-density-switch { display:flex; gap:3px; margin-left:auto; }
.conversation-density-switch button { padding:4px 7px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:9px; cursor:pointer; }
.conversation-density-switch button.active { background:rgba(156,124,255,.16); color:#ded8ff; }
.game-conversation-panel .room-conversation { border:0; padding:0; background:transparent; box-shadow:none; }
.game-conversation-panel .room-conversation-head,.game-conversation-panel .room-media-check { display:none; }
body[data-game-conversation-density="small"] .game-conversation-panel .conversation-participant-grid { grid-template-columns:1fr; gap:6px; }
body[data-game-conversation-density="small"] .game-conversation-panel .conversation-participant { grid-template-columns:58px minmax(0,1fr) auto; padding:5px; border-radius:10px; }
body[data-game-conversation-density="small"] .game-conversation-panel .conversation-badges { display:none; }
body[data-game-conversation-density="small"] .game-conversation-panel .conversation-person-name strong { font-size:11px; }
body[data-game-conversation-density="small"] .game-conversation-panel .conversation-face { border-radius:8px; }
body[data-game-conversation-density="medium"] .game-conversation-panel .conversation-participant-grid { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
body[data-game-conversation-density="large"] .game-conversation-panel .conversation-participant-grid { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
body.game-view-active.game-view-videochat .board-tile-head { padding:4px 5px !important; gap:4px; }
body.game-view-active.game-view-videochat .board-player-line { align-items:center; }
body.game-view-active.game-view-videochat .board-player-line .player-mini-media,
body.game-view-active.game-view-videochat .board-player-line .player-mini-media-placeholder { width:30px; height:30px; flex-basis:30px; border-radius:7px; box-shadow:none; }

/* R28 / v0.9.69: the HUD is one stable cluster. Left corners mirror the
   complete Life -> identity/status -> quick controls -> facecam order. */
body.game-view-active .board-player-line { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; min-width:0; }
body.game-view-active .board-tile.gv-hud-top-left .board-player-line,
body.game-view-active .board-tile.gv-hud-bottom-left .board-player-line { flex-direction:row-reverse; justify-content:flex-end; }
body.game-view-active .board-tile.gv-hud-top-left .board-tile-head > div:first-child,
body.game-view-active .board-tile.gv-hud-bottom-left .board-tile-head > div:first-child { text-align:right; }
body.game-view-active .game-life-control { margin:0; flex:0 0 auto; }
body.game-view-active .game-hud-identity { display:flex; flex-direction:column; justify-content:center; gap:2px; min-width:0; max-width:clamp(120px,19vw,250px); }
body.game-view-active .game-hud-status-row { display:flex; align-items:center; gap:4px; min-width:0; min-height:15px; }
body.game-view-active .board-player { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:normal; font-size:clamp(11px,1.05vw,14px); line-height:1.05; font-weight:780; }
body.game-view-active .game-hud-quick-cluster { display:flex; align-items:center; gap:2px; flex:0 0 auto; white-space:nowrap; }
body.game-view-active .game-hud-status-row > .conversation-voice-level { width:34px; height:4px; flex:0 0 34px; opacity:.55; }
body.game-view-active .board-tile.gv-hud-top-left .game-hud-identity,
body.game-view-active .board-tile.gv-hud-bottom-left .game-hud-identity { align-items:flex-end; text-align:right; }
/* v0.10.5: the own-board "Kurz weg" control in the Game View HUD must be as
   readable as the adjacent camera/microphone controls. The old muted color +
   .55 opacity made the pause glyph look disabled even though it was active. */
/* v0.10.6: Kurz weg is part of the same three-button media cluster as
   camera and microphone. The rendered button also carries
   .game-hud-media-toggle, so border/background/hover are inherited from the
   shared media-button contract instead of looking like a borderless exception. */
.game-hud-afk-toggle { display:grid; place-items:center; width:24px; height:24px; min-width:24px; padding:0; color:#fff; cursor:pointer; opacity:1; }
.game-hud-afk-toggle:hover { opacity:1; color:#fff; }
body.game-view-active .game-hud-media-toggles { display:grid; grid-template-columns:repeat(1,22px); gap:2px; }
body.game-view-active .game-hud-media-toggle { width:22px; height:22px; min-width:22px; }
body.game-view-active .game-player-face-controls { flex:0 0 auto; }
@media (max-width:760px) {
  body.game-view-active .game-hud-identity { max-width:clamp(96px,26vw,170px); }
  body.game-view-active .board-player { font-size:11px; }
  body.game-view-active .game-hud-status-row > .conversation-voice-level { width:24px; flex-basis:24px; }
}

/* R29 layouts: geometry and local player placement are separate JS state, CSS only paints the resolved geometry. */
body.game-view-active .board-grid[class*="gv-layout-duel-"],
body.game-view-active .board-grid[class*="gv-layout-side-"],
body.game-view-active .board-grid[class*="gv-layout-three-"],
body.game-view-active .board-grid[class*="gv-layout-grid-"] { display:grid; }
body.game-view-active .board-grid.gv-layout-duel-bottom { grid-template-columns:1fr; grid-template-rows:var(--gv-split-y) minmax(0,1fr); }
body.game-view-active .board-grid.gv-layout-duel-bottom .gv-slot-2 { grid-column:1!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-duel-bottom .gv-slot-1 { grid-column:1!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-duel-top { grid-template-columns:1fr; grid-template-rows:var(--gv-split-y) minmax(0,1fr); }
body.game-view-active .board-grid.gv-layout-duel-top .gv-slot-1 { grid-column:1!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-duel-top .gv-slot-2 { grid-column:1!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-side-left { grid-template-columns:minmax(0,var(--gv-split-x)) minmax(0,1fr); grid-template-rows:1fr; }
body.game-view-active .board-grid.gv-layout-side-left .gv-slot-1 { grid-column:1!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-side-left .gv-slot-2 { grid-column:2!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-side-right { grid-template-columns:minmax(0,var(--gv-split-x)) minmax(0,1fr); grid-template-rows:1fr; }
body.game-view-active .board-grid.gv-layout-side-right .gv-slot-2 { grid-column:1!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-side-right .gv-slot-1 { grid-column:2!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-three-bottom,
body.game-view-active .board-grid.gv-layout-three-top,
body.game-view-active .board-grid.gv-layout-three-left,
body.game-view-active .board-grid.gv-layout-three-right,
body.game-view-active .board-grid[class*="gv-layout-grid-"] { grid-template-columns:minmax(0,var(--gv-split-x)) minmax(0,1fr); grid-template-rows:minmax(0,var(--gv-split-y)) minmax(0,1fr); }
body.game-view-active .board-grid.gv-layout-three-bottom .gv-slot-2 { grid-column:1!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-three-bottom .gv-slot-3 { grid-column:2!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-three-bottom .gv-slot-1 { grid-column:1/3!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-three-top .gv-slot-1 { grid-column:1/3!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-three-top .gv-slot-2 { grid-column:1!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-three-top .gv-slot-3 { grid-column:2!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-three-left .gv-slot-1 { grid-column:1!important; grid-row:1/3!important; }
body.game-view-active .board-grid.gv-layout-three-left .gv-slot-2 { grid-column:2!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-three-left .gv-slot-3 { grid-column:2!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-three-right .gv-slot-1 { grid-column:2!important; grid-row:1/3!important; }
body.game-view-active .board-grid.gv-layout-three-right .gv-slot-2 { grid-column:1!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-three-right .gv-slot-3 { grid-column:1!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-grid-bottom-left .gv-slot-1 { grid-column:1!important; grid-row:2!important; } body.game-view-active .board-grid.gv-layout-grid-bottom-left .gv-slot-2 { grid-column:2!important; grid-row:2!important; } body.game-view-active .board-grid.gv-layout-grid-bottom-left .gv-slot-3 { grid-column:1!important; grid-row:1!important; } body.game-view-active .board-grid.gv-layout-grid-bottom-left .gv-slot-4 { grid-column:2!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-grid-bottom-right .gv-slot-1 { grid-column:2!important; grid-row:2!important; } body.game-view-active .board-grid.gv-layout-grid-bottom-right .gv-slot-2 { grid-column:1!important; grid-row:2!important; } body.game-view-active .board-grid.gv-layout-grid-bottom-right .gv-slot-3 { grid-column:2!important; grid-row:1!important; } body.game-view-active .board-grid.gv-layout-grid-bottom-right .gv-slot-4 { grid-column:1!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-grid-top-left .gv-slot-1 { grid-column:1!important; grid-row:1!important; } body.game-view-active .board-grid.gv-layout-grid-top-left .gv-slot-2 { grid-column:2!important; grid-row:1!important; } body.game-view-active .board-grid.gv-layout-grid-top-left .gv-slot-3 { grid-column:1!important; grid-row:2!important; } body.game-view-active .board-grid.gv-layout-grid-top-left .gv-slot-4 { grid-column:2!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-grid-top-right .gv-slot-1 { grid-column:2!important; grid-row:1!important; } body.game-view-active .board-grid.gv-layout-grid-top-right .gv-slot-2 { grid-column:1!important; grid-row:1!important; } body.game-view-active .board-grid.gv-layout-grid-top-right .gv-slot-3 { grid-column:2!important; grid-row:2!important; } body.game-view-active .board-grid.gv-layout-grid-top-right .gv-slot-4 { grid-column:1!important; grid-row:2!important; }

.modal.game-layout-modal { width:min(980px,calc(100vw - 32px)); overflow-x:hidden; }
.game-layout-picker { display:grid; gap:16px; min-width:0; }
.game-layout-group { display:grid; gap:7px; }
.game-layout-group-label { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.game-layout-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px; }
.game-layout-card { position:relative; display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:10px; min-height:82px; padding:8px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(255,255,255,.025); color:var(--text); text-align:left; cursor:pointer; }
.game-layout-card:hover { background:rgba(255,255,255,.055); }
.game-layout-card.selected { border-color:rgba(156,124,255,.65); background:rgba(156,124,255,.1); box-shadow:0 0 0 2px rgba(156,124,255,.08); }
.game-layout-card em { position:absolute; top:5px; right:6px; color:#cfc7ff; font-size:8px; font-style:normal; }
.game-layout-card-copy { min-width:0; }
.game-layout-card-copy strong,.game-layout-card-copy small { display:block; }
.game-layout-card-copy small { margin-top:3px; color:var(--muted); font-size:9px; }
.game-layout-preview { position:relative; display:grid; width:72px; height:52px; gap:2px; padding:2px; border-radius:7px; background:#080a0d; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }
.preview-slot { display:block; border-radius:3px; background:rgba(255,255,255,.13); }
.preview-slot.own { background:rgba(156,124,255,.55); }
.preview-2.preview-stack-bottom,.preview-2.preview-stack-top { grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
.preview-2.preview-stack-bottom .preview-slot-1 { grid-row:2; } .preview-2.preview-stack-top .preview-slot-1 { grid-row:1; }
.preview-2.preview-side-left,.preview-2.preview-side-right { grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
.preview-2.preview-side-right .preview-slot-1 { grid-column:2; }
.preview-3.preview-three-bottom,.preview-3.preview-three-top { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1.2fr; }
.preview-3.preview-three-bottom .preview-slot-1 { grid-column:1/3; grid-row:2; } .preview-3.preview-three-bottom .preview-slot-2 { grid-column:1; grid-row:1; } .preview-3.preview-three-bottom .preview-slot-3 { grid-column:2; grid-row:1; }
.preview-3.preview-three-top .preview-slot-1 { grid-column:1/3; grid-row:1; } .preview-3.preview-three-top .preview-slot-2 { grid-column:1; grid-row:2; } .preview-3.preview-three-top .preview-slot-3 { grid-column:2; grid-row:2; }
.preview-3.preview-three-left,.preview-3.preview-three-right { grid-template-columns:1.2fr 1fr; grid-template-rows:1fr 1fr; }
.preview-3.preview-three-left .preview-slot-1 { grid-column:1; grid-row:1/3; } .preview-3.preview-three-left .preview-slot-2 { grid-column:2; grid-row:1; } .preview-3.preview-three-left .preview-slot-3 { grid-column:2; grid-row:2; }
.preview-3.preview-three-right .preview-slot-1 { grid-column:2; grid-row:1/3; } .preview-3.preview-three-right .preview-slot-2 { grid-column:1; grid-row:1; } .preview-3.preview-three-right .preview-slot-3 { grid-column:1; grid-row:2; }
.preview-4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.preview-4.preview-grid-bottom-left .preview-slot-1 { grid-column:1; grid-row:2; } .preview-4.preview-grid-bottom-right .preview-slot-1 { grid-column:2; grid-row:2; } .preview-4.preview-grid-top-left .preview-slot-1 { grid-column:1; grid-row:1; } .preview-4.preview-grid-top-right .preview-slot-1 { grid-column:2; grid-row:1; }
.game-layout-rotation-options { display:flex; flex-wrap:wrap; gap:6px; }
.game-layout-rotation { min-height:32px; padding:6px 10px; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:rgba(255,255,255,.025); color:var(--muted); cursor:pointer; }
.game-layout-rotation.selected { border-color:rgba(156,124,255,.5); background:rgba(156,124,255,.1); color:#e0dbff; }
.game-view-layout-form.compact { grid-template-columns:1fr 1fr; }

/* R46 deck colors / official Scryfall symbol images. */
.deck-color-picker { display:flex; align-items:center; gap:10px; margin:7px 0; padding:7px 9px; border-radius:11px; background:rgba(0,0,0,.14); }
.deck-color-picker-copy { display:grid; min-width:84px; }
.deck-color-picker-copy strong { font-size:10px; }
.deck-color-picker-copy span { color:var(--muted); font-size:8px; }
.deck-color-wheel { display:flex; gap:4px; }
.deck-color-button { position:relative; display:grid; place-items:center; width:30px; height:30px; padding:2px; border:1px solid transparent; border-radius:999px; background:transparent; cursor:pointer; opacity:.48; transition:opacity .12s,transform .12s,box-shadow .12s; }
.deck-color-button:hover { opacity:.82; transform:translateY(-1px); }
.deck-color-button.selected { opacity:1; border-color:rgba(255,255,255,.5); box-shadow:0 0 0 2px rgba(156,124,255,.18); }
.deck-color-button.suggested:not(.selected) { opacity:.78; border-style:dashed; border-color:rgba(255,255,255,.32); }
.mana-color-symbol { display:block; width:22px; height:22px; object-fit:contain; }
.mana-color-fallback { display:grid; place-items:center; border-radius:50%; background:#d8d8d8; color:#111; font-size:10px; font-weight:900; }
.game-deck-color-hud { display:flex; align-items:center; gap:1px; flex:0 0 auto; }
.game-deck-color-hud .mana-color-symbol.hud { width:15px; height:15px; }
body.game-view-active .game-deck-color-hud .mana-color-symbol.hud { width:14px; height:14px; }

@media (max-width:720px) {
  .room-media-check { align-items:flex-start; flex-direction:column; }
  .room-media-check-actions { justify-content:flex-start; }
  .conversation-participant-grid,.room-conversation > .conversation-participant-grid { grid-template-columns:1fr; }
  .game-layout-picker { min-width:0; }
  .game-layout-cards { grid-template-columns:1fr; }
  .game-view-layout-form.compact { grid-template-columns:1fr; }
  .deck-color-picker { align-items:flex-start; flex-wrap:wrap; }
}

/* R46 active-game editing: the HUD stays quiet; the edit affordance appears on hover/focus. */
.game-deck-color-hud.editable { position:relative; min-height:16px; }
.game-deck-color-symbols { display:flex; align-items:center; gap:1px; }
.game-deck-color-edit { display:grid; place-items:center; width:18px; height:18px; margin-left:2px; padding:0; border:0; border-radius:6px; background:rgba(12,14,18,.72); color:var(--muted); opacity:.68; pointer-events:auto; transition:opacity .12s,color .12s,background .12s; }
.board-player-line:hover .game-deck-color-edit,.game-deck-color-hud:focus-within .game-deck-color-edit,.game-deck-color-hud.editor-open .game-deck-color-edit { opacity:1; }
.game-deck-color-edit:hover { color:var(--text); background:rgba(28,31,38,.92); }
.game-deck-color-edit svg { width:11px; height:11px; }
.game-deck-color-hud-editor { position:absolute; z-index:90; top:calc(100% + 7px); left:0; width:max-content; max-width:min(440px,80vw); display:none; }
.game-deck-color-hud.editor-open .game-deck-color-hud-editor { display:block; }
.game-deck-color-hud-editor .deck-color-picker { margin:0; background:rgba(15,17,22,.97); border:1px solid rgba(255,255,255,.1); box-shadow:0 14px 34px rgba(0,0,0,.42); backdrop-filter:blur(16px); }
.gv-hud-top-right .game-deck-color-hud-editor,.gv-hud-bottom-right .game-deck-color-hud-editor { left:auto; right:0; }
.gv-hud-bottom-left .game-deck-color-hud-editor,.gv-hud-bottom-right .game-deck-color-hud-editor { top:auto; bottom:calc(100% + 7px); }


/* v0.9.71 interaction polish + private developer test participants. */
body.game-view-active, body.game-view-active .modal { -webkit-user-select:none; user-select:none; }
body.game-view-active input, body.game-view-active textarea, body.game-view-active [contenteditable="true"],
body.game-view-active .room-diagnostics-modal, body.game-view-active .room-diagnostics-log,
body.game-view-active .game-board-marker-popover, body.game-view-active .game-marker-preview-portal,
body.game-view-active .game-marker-editor-modal, body.game-view-active .game-marker-editor,
body.game-view-active .game-card-lightbox { -webkit-user-select:text; user-select:text; }
.conversation-role.developer-fake { color:#f1d58b; background:rgba(224,178,67,.12); }
.developer-fake-level { accent-color:currentColor; }
.developer-fake-mini { overflow:hidden; background:#090b0f; }
.developer-fake-mini img { width:100%; height:100%; object-fit:cover; display:block; }
.player-mini-media[data-board-role-slot="scanner"].developer-fake-mini img { object-fit:cover; }
.game-seat-camera.developer-fake-seat-camera { position:relative; overflow:hidden; background:#050608; }
.game-seat-camera.developer-fake-seat-camera img { width:100%; height:100%; object-fit:contain; display:block; }
.game-deck-color-hud.editable { min-height:18px; }
.game-deck-color-edit { width:auto; min-width:20px; height:20px; display:flex; align-items:center; justify-content:center; gap:1px; padding:1px 3px; opacity:.9; }
.game-deck-color-hud.no-colors .game-deck-color-edit { width:20px; border:1px dashed rgba(255,255,255,.22); color:#b9c1cd; background:rgba(12,14,18,.72); }
.game-deck-color-hud.no-colors .game-deck-color-edit:hover { color:#fff; border-color:rgba(255,255,255,.45); }
.game-deck-color-hud.has-colors .game-deck-color-edit { background:rgba(12,14,18,.52); }
.game-deck-color-edit .game-deck-color-symbols { display:flex; align-items:center; gap:1px; pointer-events:none; }
.game-deck-color-edit .game-deck-color-symbols > .ui-icon { width:13px; height:13px; }
.game-deck-color-hud.has-colors .game-deck-color-edit .mana-color-symbol.hud { width:14px; height:14px; }
.game-deck-color-hud.editor-open .game-deck-color-edit { background:rgba(36,39,47,.96); box-shadow:0 0 0 1px rgba(255,255,255,.16); }

.developer-fake-audio { display:inline-flex; align-items:center; gap:4px; min-width:54px; }
.developer-fake-audio .developer-fake-mic-icon { display:grid; place-items:center; }
.developer-fake-audio .ui-icon { width:12px; height:12px; }
.developer-fake-audio .conversation-voice-level { width:30px; min-width:30px; }

/* v0.9.72: left conversation edge tab + movable panel, room/player HUD persistence, room-only camera-aware seat drag/drop, deferred WUBRG commit. */

/* v0.9.75 unified layout contracts: conversation, setup seats, HUD and 2HG. */

/* Conversation is one bounded flex column. Only the body scrolls; drag lives on the
   header and resize lives on the explicit bottom-right handle. */
body.game-view-active.game-view-videochat .game-conversation-panel {
  box-sizing:border-box;
  position:fixed;
  right:4vw;
  bottom:62px;
  width:92vw;
  height:calc(100vh - 114px);
  min-width:min(452px,calc(100vw - 16px));
  min-height:min(230px,calc(100vh - 16px));
  max-width:calc(100vw - 16px);
  max-height:calc(100vh - 16px);
  display:flex;
  flex-direction:column;
  gap:0;
  padding:14px;
  overflow:hidden;
  resize:none;
}
body.game-view-active.game-view-videochat .game-conversation-panel.user-positioned {
  right:auto !important;
  bottom:auto !important;
}
body.game-view-active.game-view-videochat[data-game-conversation-density="large"] .game-conversation-panel {
  right:4vw;
  bottom:62px;
  width:92vw;
  height:calc(100vh - 114px);
  padding:14px;
}
body.game-view-active.game-view-videochat[data-game-conversation-density="large"] .game-conversation-panel.user-positioned {
  inset:auto auto auto auto;
}
.game-conversation-panel-head {
  position:relative;
  top:auto;
  z-index:2;
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:34px;
  margin:0;
  padding:0 2px 7px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:transparent;
  cursor:grab;
  touch-action:none;
}
.game-conversation-panel-head:active,.game-conversation-panel.is-dragging .game-conversation-panel-head { cursor:grabbing; }
.game-conversation-panel-body {
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  overflow:auto;
  padding-top:9px;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
.game-conversation-panel-body > .room-conversation { min-width:0; }
.game-conversation-panel.is-resizing { box-shadow:0 22px 56px rgba(0,0,0,.68),0 0 0 1px rgba(156,124,255,.14); }
.game-conversation-resize-hint { margin-left:auto; color:var(--faint); font-size:9px; font-weight:650; pointer-events:none; }
.game-conversation-resize-handle {
  position:absolute;
  z-index:8;
  right:2px;
  bottom:2px;
  width:22px;
  height:22px;
  padding:0;
  border:0;
  border-radius:0 0 12px 0;
  background:linear-gradient(135deg,transparent 0 48%,rgba(255,255,255,.2) 49% 54%,transparent 55% 64%,rgba(255,255,255,.32) 65% 70%,transparent 71%);
  cursor:nwse-resize;
  touch-action:none;
}
.game-conversation-panel .density-game { display:grid; gap:16px; }
.conversation-video-section,.conversation-compact-section { min-width:0; }
.conversation-video-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),420px));
  justify-content:start;
  gap:14px;
}
.conversation-video-grid > .conversation-participant {
  grid-template-columns:minmax(150px,40%) minmax(0,1fr) auto;
  align-items:start;
  gap:14px;
  padding:11px;
}
.conversation-video-grid .conversation-face { aspect-ratio:4/3; min-height:150px; }
.conversation-video-grid .conversation-person-name strong { font-size:15px; }
.conversation-section-label {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.conversation-section-label::after { content:""; height:1px; flex:1; background:rgba(255,255,255,.075); }
.conversation-compact-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(203px,100%),203px));
  justify-content:start;
  gap:10px 14px;
}
.conversation-participant.compact-participant {
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:start;
  gap:8px;
  min-height:58px;
  padding:7px 8px;
  border-radius:11px;
}
.conversation-compact-avatar { display:grid; place-items:center; width:38px; height:38px; }
.conversation-compact-avatar .conversation-avatar { width:36px; height:36px; font-size:17px; }
.conversation-participant.compact-participant .conversation-person-name strong { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conversation-participant.compact-participant .conversation-person-copy > span { font-size:8px; }
.conversation-participant.compact-participant .conversation-badges { margin-top:4px; gap:3px; }
.conversation-participant.compact-participant .conversation-role,
.conversation-participant.compact-participant .conversation-presence,
.conversation-participant.compact-participant .conversation-muted { min-height:17px; padding:1px 5px; font-size:8px; }
.conversation-participant.compact-participant .conversation-voice-level { width:28px; min-width:22px; }
.conversation-own-inline-actions {
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  gap:5px;
  margin-top:8px;
  min-width:0;
}
.conversation-own-inline-actions .game-hud-media-toggles { display:flex; flex-flow:row nowrap; width:auto; height:28px; gap:5px; }
.conversation-own-inline-actions .game-hud-media-toggle,
.conversation-own-inline-actions .conversation-afk-inline { width:28px; height:28px; min-width:28px; border-radius:8px; }
.conversation-participant.compact-participant .conversation-own-inline-actions { margin-top:5px; }
.conversation-participant.compact-participant .conversation-own-inline-actions .game-hud-media-toggle,
.conversation-participant.compact-participant .conversation-own-inline-actions .conversation-afk-inline { width:24px; height:24px; min-width:24px; }

/* Remote mixer controls are part of their participant card flow; they never float
   over a video or a neighboring tile. */
.conversation-mixer { position:relative; align-self:start; min-width:0; }
.conversation-mixer-dock {
  position:static;
  width:min(290px,100%);
  margin-top:7px;
  padding:8px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  box-shadow:none;
}
.conversation-mixer-dock .conversation-mixer-row { display:grid; gap:7px; }
.conversation-mixer-dock .conversation-mixer-row label { grid-template-columns:auto minmax(80px,1fr) auto; }

/* Setup seats have one geometry: header, optional picker, fixed media viewport,
   optional actions. Real and DEV camera surfaces use exactly the same viewport. */
.game-seat-layout { align-items:stretch; }
.game-seat {
  align-self:stretch;
  height:100%;
  min-width:0;
  display:grid;
  grid-template-rows:auto auto auto auto;
  align-content:start;
  gap:8px;
}
.game-seat.occupied-seat { gap:8px; }
.game-seat-media { width:100%; min-width:0; min-height:0; }
.game-seat-camera,
.game-seat-camera.developer-fake-seat-camera {
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#050608;
}
.game-seat-camera > video,
.game-seat-camera > img,
.game-seat-camera.developer-fake-seat-camera > img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.game-seat-head.game-seat-head-v2 {
  display:grid;
  grid-template-columns:auto minmax(86px,1fr) auto auto;
  align-items:center;
  gap:7px;
  width:100%;
  min-width:0;
  min-height:36px;
}
.game-seat-head-v2 > .game-seat-face { display:grid; place-items:center; min-width:0; }
.game-seat-head-v2 > .game-seat-person { display:grid; gap:1px; min-width:0; max-width:none; }
.game-seat-head-v2 > .game-seat-life { display:flex; align-items:center; min-width:0; }
.game-seat-head-v2 > .game-seat-player-tools { display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-start; gap:5px; min-width:0; margin:0; }
.game-seat-head-v2 .game-seat-face .player-mini-media,
.game-seat-head-v2 .game-seat-face .player-mini-media-placeholder { width:34px; height:34px; flex-basis:34px; border-radius:8px; }
.game-seat-head-v2 .game-seat-face .player-avatar-fallback { width:34px; height:34px; }
.game-seat-head-v2 .game-seat-face .player-mini-avatar { width:28px; height:28px; font-size:13px; }
.game-seat-head-v2 .game-seat-kicker { font-size:7px; line-height:1.05; color:var(--faint); }
.game-seat-name-row { display:flex; align-items:center; gap:5px; min-width:0; }
.game-seat-name-row > strong { min-width:0; overflow:visible; text-overflow:unset; white-space:normal; overflow-wrap:anywhere; font-size:13px; line-height:1.02; max-height:2.04em; }
.game-seat-own-badge { flex:0 0 auto; padding:1px 5px; border-radius:999px; background:rgba(156,124,255,.16); color:#ded7ff; font-size:8px; font-weight:850; }
.game-seat-name-row .room-presence-badge { flex:0 0 auto; padding:2px 5px; font-size:8px; }
.game-seat-head-v2 .game-life-control { height:31px; min-width:54px; margin:0; border-radius:9px; }
.game-seat-head-v2 .game-life-control.editable { min-width:74px; }
.game-seat-head-v2 .game-life-control strong { font-size:21px; padding:0 17px; }
.game-seat-head-v2 .game-seat-player-tools .game-hud-media-toggles { display:flex; flex-flow:row nowrap; width:auto; height:25px; gap:3px; }
.game-seat-head-v2 .game-seat-player-tools .game-hud-media-toggle { width:25px; height:25px; min-width:25px; }
.game-seat-head-v2 .game-seat-player-tools .player-mini-media,
.game-seat-head-v2 .game-seat-player-tools .player-mini-media-placeholder { width:30px; height:30px; flex-basis:30px; }
.game-seat-head-v2 .player-card-audio { min-width:0; }
.game-seat-head-v2 .developer-fake-audio { min-width:48px; }
.game-seat-head-v2 .developer-fake-audio .conversation-voice-level { width:26px; min-width:26px; }

/* Active HUD densities share one axis and one horizontal media-control contract. */
body.game-view-active .board-grid { --gv-hud-axis:36px; --gv-hud-face:30px; --gv-hud-name:13px; }
body.game-view-active .board-grid[data-hud-size="compact"] { --gv-hud-axis:32px; --gv-hud-face:28px; --gv-hud-name:10px; }
body.game-view-active .board-grid[data-hud-size="large"] { --gv-hud-axis:40px; --gv-hud-face:34px; --gv-hud-name:14px; }
body.game-view-active .board-player-line {
  display:flex;
  flex-flow:row nowrap;
  align-items:center !important;
  min-width:0;
  min-height:var(--gv-hud-axis);
  gap:5px;
}
body.game-view-active .board-tile.gv-hud-top-left .board-player-line,
body.game-view-active .board-tile.gv-hud-bottom-left .board-player-line { flex-direction:row-reverse; justify-content:flex-end; }
body.game-view-active .game-life-control { height:var(--gv-hud-axis) !important; align-self:center !important; margin:0; }
body.game-view-active .game-hud-identity {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-content:center;
  gap:1px;
  flex:1 1 auto;
  min-width:74px;
  max-width:min(240px,26vw);
  min-height:var(--gv-hud-axis);
  align-self:center;
}
body.game-view-active .board-player {
  display:block;
  min-width:0;
  max-width:100%;
  overflow:visible;
  text-overflow:unset;
  white-space:normal;
  overflow-wrap:anywhere;
  font-size:var(--gv-hud-name);
  line-height:.96;
  font-weight:780;
  max-height:1.92em;
}
body.game-view-active .game-hud-status-row { display:flex; align-items:center; gap:3px; min-width:0; min-height:11px; overflow:hidden; }
body.game-view-active .game-hud-status-row > .conversation-voice-level { width:30px; min-width:20px; height:4px; flex:0 1 30px; opacity:.72; }
body.game-view-active .board-tile.gv-hud-top-left .game-hud-identity,
body.game-view-active .board-tile.gv-hud-bottom-left .game-hud-identity { justify-items:end; text-align:right; }
body.game-view-active .game-deck-color-hud {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 1 auto;
  align-self:center;
  min-width:20px;
  min-height:var(--gv-hud-axis);
  height:var(--gv-hud-axis);
  margin:0 2px;
  padding:0;
}
body.game-view-active .game-deck-color-edit {
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:20px;
  height:22px;
  margin:0;
  padding:1px 2px;
  line-height:1;
}
body.game-view-active .game-deck-color-edit .game-deck-color-symbols { display:flex; align-items:center; justify-content:center; min-height:0; height:16px; line-height:0; }
body.game-view-active .game-deck-color-edit .mana-color-symbol.hud { display:block; width:14px; height:14px; margin:0; align-self:center; }
body.game-view-active .game-hud-quick-cluster,
body.game-view-active .game-player-face-controls { display:flex; flex-flow:row nowrap; flex:0 0 auto; min-height:var(--gv-hud-axis); align-items:center; align-self:center; gap:2px; }
body.game-view-active .game-hud-media-toggles { display:flex; flex-flow:row nowrap; width:auto; height:22px; gap:2px; }
body.game-view-active .game-hud-media-toggle,
body.game-view-active .game-hud-afk-toggle { width:22px; height:22px; min-width:22px; }
body.game-view-active .board-player-line .game-player-face-controls .player-mini-media,
body.game-view-active .board-player-line .game-player-face-controls .player-mini-media-placeholder { width:var(--gv-hud-face); height:var(--gv-hud-face); flex-basis:var(--gv-hud-face); margin:0; }
body.game-view-active .board-grid[data-hud-size="compact"] .game-hud-media-toggle,
body.game-view-active .board-grid[data-hud-size="compact"] .game-hud-afk-toggle { width:20px; height:20px; min-width:20px; }
body.game-view-active .board-grid[data-hud-size="compact"] .game-hud-media-toggles { width:auto; height:20px; }
body.game-view-active .board-grid[data-hud-size="compact"] .game-deck-color-edit .mana-color-symbol.hud { width:12px; height:12px; }
body.game-view-active .board-grid[data-hud-size="large"] .game-hud-media-toggle,
body.game-view-active .board-grid[data-hud-size="large"] .game-hud-afk-toggle { width:24px; height:24px; min-width:24px; }
body.game-view-active .board-grid[data-hud-size="large"] .game-hud-media-toggles { width:auto; height:24px; }

/* Two-Headed Giant setup and shared counters. Counter overlays are positioned from
   the union of their two real board tiles, so they remain centered after layout/split changes. */
.game-team-setup { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(300px,1.4fr); gap:10px 16px; align-items:end; padding:11px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(255,255,255,.025); }
.game-team-setup > div:first-child { min-width:0; }
.game-team-setup p { margin:3px 0 0; color:var(--muted); font-size:10px; }
.game-team-setup-controls { display:grid; grid-template-columns:minmax(120px,1fr) minmax(120px,1fr) auto; gap:8px; align-items:end; min-width:0; }
.game-team-setup-controls label { display:grid; gap:4px; min-width:0; }
.game-team-setup-controls label > span { color:var(--muted); font-size:9px; font-weight:700; }
.game-team-auto-state { grid-column:1/-1; color:var(--muted); font-size:10px; }
.game-team-auto-state.configured { color:#bfe9c9; }
.game-team-badge { display:inline-flex; align-items:center; min-height:15px; padding:1px 5px; border-radius:999px; background:rgba(255,255,255,.07); color:var(--muted); font-size:8px; font-weight:800; white-space:nowrap; }
.board-grid { position:relative; }
.game-team-life-overlay { position:absolute; z-index:58; transform:translate(-50%,-50%); pointer-events:none; }
.game-team-life-overlay .game-life-control { pointer-events:auto; margin:0; box-shadow:0 8px 22px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.1); }
.game-team-life-label { display:block; margin-bottom:3px; padding:1px 5px; border-radius:999px; background:rgba(8,10,14,.86); color:rgba(255,255,255,.72); font-size:8px; font-weight:800; text-align:center; white-space:nowrap; }
.game-layout-preview { position:relative; }
.preview-team-counter { position:absolute; z-index:4; display:grid; place-items:center; min-width:22px; height:14px; padding:0 4px; border-radius:999px; background:rgba(6,8,11,.88); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:8px; font-style:normal; line-height:1; }
.preview-team-counter.team-a { left:26%; top:50%; transform:translate(-50%,-50%); }
.preview-team-counter.team-b { right:26%; top:50%; transform:translate(50%,-50%); }
.preview-slot.team-a { box-shadow:inset 0 0 0 1px rgba(120,190,255,.72); }
.preview-slot.team-b { box-shadow:inset 0 0 0 1px rgba(255,170,110,.72); }

/* Modal title and close control share one row. */
.modal-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.modal-title-row > h3,.modal-title-row > h2 { margin:0; }
.modal-close-button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; }
.modal-close-button:hover { color:var(--text); background:rgba(255,255,255,.07); }

/* Mana display is centered on the HUD axis; pinned info/splitter interaction retain
   their existing local-only behavior. */
.game-deck-color-hud { align-self:center; }
.game-deck-color-edit { margin:0; line-height:0; vertical-align:middle; }
.game-deck-color-edit .game-deck-color-symbols { justify-content:center; }
.game-deck-color-edit .mana-color-symbol.hud { align-self:center; }
body.game-view-active[data-game-view-tool="arrow"] .game-view-split-handle { pointer-events:auto !important; }
.game-marker-preview-portal.is-pinned .game-marker-preview-head { cursor:grab; touch-action:none; }
.game-marker-preview-portal.is-pinned.is-dragging .game-marker-preview-head { cursor:grabbing; }
.game-marker-preview-portal.is-pinned.is-dragging { box-shadow:0 22px 60px rgba(0,0,0,.76),0 0 0 2px rgba(255,221,123,.12); }

@media (max-width:900px) {
  .game-seat-head.game-seat-head-v2 { grid-template-columns:auto minmax(100px,1fr) auto; }
  .game-seat-head-v2 > .game-seat-player-tools { grid-column:2/-1; justify-self:start; }
  .game-team-setup { grid-template-columns:1fr; }
  .game-team-setup-controls { grid-template-columns:1fr 1fr; }
  .game-team-setup-controls > button { grid-column:1/-1; justify-self:start; }
}
@media (max-width:720px) {
  body.game-view-active.game-view-videochat .game-conversation-panel { min-width:min(300px,calc(100vw - 12px)); min-height:min(220px,calc(100vh - 12px)); padding:10px; }
  .conversation-video-grid,.conversation-compact-grid { grid-template-columns:1fr; }
  .conversation-video-grid > .conversation-participant { grid-template-columns:minmax(100px,36%) minmax(0,1fr) auto; gap:8px; }
  .game-team-setup-controls { grid-template-columns:1fr; }
  .game-team-setup-controls > button { grid-column:auto; }
  body.game-view-active .game-hud-identity { min-width:56px; max-width:min(170px,28vw); }
  body.game-view-active .game-hud-status-row > .conversation-voice-level { width:22px; flex-basis:22px; }
}


/* v0.9.78: voice meters use one high-contrast visual contract in every density.
   The JS writes --voice-level-percent from the same analyser state used by the
   full-width media-settings meter. The dB-scaled value keeps compact 30–50 px
   meters visibly responsive without changing any audio/DSP gain. */
meter.voice-level-meter,
meter.conversation-voice-level[data-local-voice-level],
meter.conversation-voice-level[data-voice-level],
.voice-hud meter[data-local-voice-level],
.voice-hud meter[data-voice-level] {
  appearance:none;
  -webkit-appearance:none;
  display:inline-block;
  overflow:hidden;
  border:0;
  border-radius:999px;
  background:linear-gradient(to right, rgba(92,216,139,.95) 0 var(--voice-level-percent,0%), rgba(255,255,255,.13) var(--voice-level-percent,0%) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  vertical-align:middle;
}
meter.voice-level-meter::-webkit-meter-bar,
meter.conversation-voice-level[data-local-voice-level]::-webkit-meter-bar,
meter.conversation-voice-level[data-voice-level]::-webkit-meter-bar,
.voice-hud meter[data-local-voice-level]::-webkit-meter-bar,
.voice-hud meter[data-voice-level]::-webkit-meter-bar { background:transparent; border:0; box-shadow:none; }
meter.voice-level-meter::-webkit-meter-optimum-value,
meter.voice-level-meter::-webkit-meter-suboptimum-value,
meter.voice-level-meter::-webkit-meter-even-less-good-value,
meter.conversation-voice-level::-webkit-meter-optimum-value,
.voice-hud meter::-webkit-meter-optimum-value { background:transparent; }
meter.voice-level-meter::-moz-meter-bar,
meter.conversation-voice-level::-moz-meter-bar,
.voice-hud meter::-moz-meter-bar { background:transparent; }
.conversation-voice-level { min-width:34px; height:7px; opacity:.9; }
.game-seat-head-v2 .developer-fake-audio .conversation-voice-level,
.conversation-participant.compact-participant .conversation-voice-level { height:6px; }
body.game-view-active .game-hud-status-row > .conversation-voice-level { min-width:28px; height:6px; opacity:.9; }
.game-seat .own-audio .voice-hud meter { height:7px; }
.player-card-audio.remote-audio > .conversation-voice-level { flex:0 0 38px; width:38px; min-width:38px; height:7px; }

/* v0.9.78: setup seat cards share one grid-row and media-viewport contract.
   The outer preview slot has one responsive height for real and DEV cameras;
   object-fit keeps the actual camera aspect ratio intact inside that slot. */
.game-seat-layout {
  grid-auto-rows:1fr;
  align-items:stretch;
  --game-seat-preview-height:clamp(160px,16vw,230px);
}
.game-seat {
  height:auto;
  min-height:0;
  align-self:stretch;
}
.game-seat-camera,
.game-seat-camera.developer-fake-seat-camera {
  width:100%;
  height:var(--game-seat-preview-height);
  min-height:var(--game-seat-preview-height);
  max-height:var(--game-seat-preview-height);
  aspect-ratio:auto;
}
.game-seat-camera > video,
.game-seat-camera > img,
.game-seat-camera.developer-fake-seat-camera > img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
@media (max-width:900px) {
  .game-seat-layout { --game-seat-preview-height:clamp(150px,24vw,210px); }
}
@media (max-height:760px) and (min-width:681px) {
  .game-marker-hero { --game-marker-card-preview-width:148px; }
  .game-marker-oracle { max-height:96px; }
  .game-card-lightbox-image { max-height:100%; }
}

@media (max-width:680px) {
  .game-seat-layout { grid-auto-rows:auto; --game-seat-preview-height:clamp(170px,52vw,260px); }
}

/* v0.9.78: 2HG layout picker exposes only contiguous team geometries. */
body.game-view-active .board-grid.gv-layout-three-team-bottom,
body.game-view-active .board-grid.gv-layout-three-team-top,
body.game-view-active .board-grid.gv-layout-three-team-left,
body.game-view-active .board-grid.gv-layout-three-team-right,
body.game-view-active .board-grid.gv-layout-grid-team-bottom,
body.game-view-active .board-grid.gv-layout-grid-team-top,
body.game-view-active .board-grid.gv-layout-grid-team-left,
body.game-view-active .board-grid.gv-layout-grid-team-right {
  display:grid;
  grid-template-columns:minmax(0,var(--gv-split-x)) minmax(0,1fr);
  grid-template-rows:minmax(0,var(--gv-split-y)) minmax(0,1fr);
}
body.game-view-active .board-grid.gv-layout-three-team-bottom .gv-slot-1 { grid-column:1!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-three-team-bottom .gv-slot-2 { grid-column:2!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-three-team-bottom .gv-slot-3 { grid-column:1/3!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-three-team-top .gv-slot-1 { grid-column:1!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-three-team-top .gv-slot-2 { grid-column:2!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-three-team-top .gv-slot-3 { grid-column:1/3!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-three-team-left .gv-slot-1 { grid-column:1!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-three-team-left .gv-slot-2 { grid-column:1!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-three-team-left .gv-slot-3 { grid-column:2!important; grid-row:1/3!important; }
body.game-view-active .board-grid.gv-layout-three-team-right .gv-slot-1 { grid-column:2!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-three-team-right .gv-slot-2 { grid-column:2!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-three-team-right .gv-slot-3 { grid-column:1!important; grid-row:1/3!important; }

body.game-view-active .board-grid.gv-layout-grid-team-bottom .gv-slot-1 { grid-column:1!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-grid-team-bottom .gv-slot-2 { grid-column:2!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-grid-team-bottom .gv-slot-3 { grid-column:1!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-grid-team-bottom .gv-slot-4 { grid-column:2!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-grid-team-top .gv-slot-1 { grid-column:1!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-grid-team-top .gv-slot-2 { grid-column:2!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-grid-team-top .gv-slot-3 { grid-column:1!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-grid-team-top .gv-slot-4 { grid-column:2!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-grid-team-left .gv-slot-1 { grid-column:1!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-grid-team-left .gv-slot-2 { grid-column:1!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-grid-team-left .gv-slot-3 { grid-column:2!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-grid-team-left .gv-slot-4 { grid-column:2!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-grid-team-right .gv-slot-1 { grid-column:2!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-grid-team-right .gv-slot-2 { grid-column:2!important; grid-row:2!important; }
body.game-view-active .board-grid.gv-layout-grid-team-right .gv-slot-3 { grid-column:1!important; grid-row:1!important; }
body.game-view-active .board-grid.gv-layout-grid-team-right .gv-slot-4 { grid-column:1!important; grid-row:2!important; }

.preview-3.preview-three-team-bottom,
.preview-3.preview-three-team-top,
.preview-3.preview-three-team-left,
.preview-3.preview-three-team-right,
.preview-4.preview-grid-team-bottom,
.preview-4.preview-grid-team-top,
.preview-4.preview-grid-team-left,
.preview-4.preview-grid-team-right { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.preview-3.preview-three-team-bottom .preview-slot-1 { grid-column:1; grid-row:2; }
.preview-3.preview-three-team-bottom .preview-slot-2 { grid-column:2; grid-row:2; }
.preview-3.preview-three-team-bottom .preview-slot-3 { grid-column:1/3; grid-row:1; }
.preview-3.preview-three-team-top .preview-slot-1 { grid-column:1; grid-row:1; }
.preview-3.preview-three-team-top .preview-slot-2 { grid-column:2; grid-row:1; }
.preview-3.preview-three-team-top .preview-slot-3 { grid-column:1/3; grid-row:2; }
.preview-3.preview-three-team-left .preview-slot-1 { grid-column:1; grid-row:1; }
.preview-3.preview-three-team-left .preview-slot-2 { grid-column:1; grid-row:2; }
.preview-3.preview-three-team-left .preview-slot-3 { grid-column:2; grid-row:1/3; }
.preview-3.preview-three-team-right .preview-slot-1 { grid-column:2; grid-row:1; }
.preview-3.preview-three-team-right .preview-slot-2 { grid-column:2; grid-row:2; }
.preview-3.preview-three-team-right .preview-slot-3 { grid-column:1; grid-row:1/3; }
.preview-4.preview-grid-team-bottom .preview-slot-1 { grid-column:1; grid-row:2; }
.preview-4.preview-grid-team-bottom .preview-slot-2 { grid-column:2; grid-row:2; }
.preview-4.preview-grid-team-bottom .preview-slot-3 { grid-column:1; grid-row:1; }
.preview-4.preview-grid-team-bottom .preview-slot-4 { grid-column:2; grid-row:1; }
.preview-4.preview-grid-team-top .preview-slot-1 { grid-column:1; grid-row:1; }
.preview-4.preview-grid-team-top .preview-slot-2 { grid-column:2; grid-row:1; }
.preview-4.preview-grid-team-top .preview-slot-3 { grid-column:1; grid-row:2; }
.preview-4.preview-grid-team-top .preview-slot-4 { grid-column:2; grid-row:2; }
.preview-4.preview-grid-team-left .preview-slot-1 { grid-column:1; grid-row:1; }
.preview-4.preview-grid-team-left .preview-slot-2 { grid-column:1; grid-row:2; }
.preview-4.preview-grid-team-left .preview-slot-3 { grid-column:2; grid-row:1; }
.preview-4.preview-grid-team-left .preview-slot-4 { grid-column:2; grid-row:2; }
.preview-4.preview-grid-team-right .preview-slot-1 { grid-column:2; grid-row:1; }
.preview-4.preview-grid-team-right .preview-slot-2 { grid-column:2; grid-row:2; }
.preview-4.preview-grid-team-right .preview-slot-3 { grid-column:1; grid-row:1; }
.preview-4.preview-grid-team-right .preview-slot-4 { grid-column:1; grid-row:2; }
.preview-team-counter,
.preview-team-counter.team-a,
.preview-team-counter.team-b { right:auto; transform:translate(-50%,-50%); }

/* Shared 2HG life sits on the team seam, not on the viewport/toolbox edge. */
.game-team-life-overlay[data-team-life-axis="horizontal"],
.game-team-life-overlay[data-team-life-axis="vertical"] { transform:translate(-50%,-50%); }

/* v0.9.78 Room-view simplification and stable setup/conversation contracts. */
.room-conversation.collapsed .room-conversation-body { display:none; }
.room-conversation-toggle { margin-bottom:0; }
.room-conversation-body { display:grid; gap:14px; margin-top:14px; min-width:0; }
.room-conversation.collapsed { padding:16px 18px; }
.room-conversation.collapsed .room-conversation-body { margin-top:0; }

/* Remote mixer and quick seat assignment are their own flow row. Opening either
   must not shrink the name column or vertically stack a player name. */
.conversation-card-actions {
  align-self:start;
  display:flex;
  flex-flow:row wrap;
  justify-content:flex-end;
  align-items:flex-start;
  gap:6px;
  min-width:0;
}
.conversation-mixer[open] {
  grid-column:1 / -1;
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:8px;
}
.conversation-mixer[open] > summary { grid-column:1; }
.conversation-mixer[open] .conversation-mixer-dock { grid-column:2; width:auto; max-width:none; margin-top:0; }
.conversation-seat-assign { position:relative; min-width:0; }
.conversation-seat-assign > summary {
  list-style:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:30px;
  min-height:30px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}
.conversation-seat-assign > summary::-webkit-details-marker { display:none; }
.conversation-seat-assign[open] { grid-column:1 / -1; width:100%; }
.conversation-seat-assign[open] > summary { margin-bottom:7px; color:var(--text); background:rgba(156,124,255,.10); border-color:rgba(156,124,255,.28); }
.conversation-seat-assign-menu { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:6px; width:100%; }
.conversation-seat-assign-option {
  min-height:28px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  cursor:pointer;
  font-size:10px;
}
.conversation-seat-assign-option:hover:not(:disabled) { background:rgba(156,124,255,.12); border-color:rgba(156,124,255,.35); }
.conversation-seat-assign-option:disabled { opacity:.45; cursor:not-allowed; }
.conversation-seat-assign-option.current { color:#ded7ff; border-color:rgba(156,124,255,.28); }

/* Room/setting view is a neutral overview. Life controls and team-life overlays
   belong to the real play surface only. Team affiliation is shown via the cards. */
body:not(.game-view-active) .room-game-panel .game-seat-life,
body:not(.game-view-active) .room-game-panel .game-team-life-overlay,
body:not(.game-view-active) .room-game-panel .board-player-line > .game-life-control { display:none !important; }
body:not(.game-view-active) .room-game-panel .board-grid.has-own-board,
body:not(.game-view-active) .room-game-panel .board-grid.spectator-layout,
body:not(.game-view-active) .room-game-panel .board-grid.mode-two_headed_giant.has-own-board {
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
body:not(.game-view-active) .room-game-panel .board-tile {
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(150px, 22vw);
  gap:10px;
}
body:not(.game-view-active) .room-game-panel .board-tile > [data-board-role-slot="board"] { min-height:0; display:block; }
body:not(.game-view-active) .room-game-panel .board-tile > [data-board-role-slot="board"] > .board-video-stage,
body:not(.game-view-active) .room-game-panel .board-tile > [data-board-role-slot="board"] > .board-video-placeholder {
  width:100%;
  height:100%;
  min-height:150px;
  aspect-ratio:16/9;
}
body:not(.game-view-active) .room-game-panel .board-tile > [data-board-role-slot="board"] > .board-video-stage video,
body:not(.game-view-active) .room-game-panel .board-tile > [data-board-role-slot="board"] > .board-video-stage img,
body:not(.game-view-active) .room-game-panel .board-tile > [data-board-role-slot="board"] > .board-video-stage canvas,
body:not(.game-view-active) .room-game-panel .board-tile > [data-board-role-slot="board"] > .board-video-stage .video-calibrated-output {
  width:100%;
  height:100%;
  max-height:none !important;
  object-fit:contain;
  transform:none !important;
}
body:not(.game-view-active) .room-game-panel .virtual-board-test-image { transform:none !important; }
body.game-view-active .virtual-board-test-image { transform:rotate(var(--gv-board-rotation,0deg)) scale(var(--gv-board-scale,1)); }
body:not(.game-view-active) .room-game-panel .board-tile.team-a,
.game-seat.team-a {
  border-color:rgba(112,167,255,.30);
  background:linear-gradient(145deg,rgba(112,167,255,.075),rgba(15,20,25,.98));
  box-shadow:inset 4px 0 0 rgba(112,167,255,.42);
}
body:not(.game-view-active) .room-game-panel .board-tile.team-b,
.game-seat.team-b {
  border-color:rgba(85,201,145,.28);
  background:linear-gradient(145deg,rgba(85,201,145,.065),rgba(15,20,25,.98));
  box-shadow:inset 4px 0 0 rgba(85,201,145,.38);
}

/* Room setup seats use one card grid independent from counters. */
.game-seat-head.game-seat-head-v2 { grid-template-columns:auto minmax(86px,1fr) auto; }
.game-seat-head-v2 > .game-seat-player-tools { justify-content:flex-end; }

@media (max-width:760px) {
  body:not(.game-view-active) .room-game-panel .board-grid.has-own-board,
  body:not(.game-view-active) .room-game-panel .board-grid.spectator-layout,
  body:not(.game-view-active) .room-game-panel .board-grid.mode-two_headed_giant.has-own-board { grid-template-columns:1fr; }
  .conversation-mixer[open] { grid-template-columns:1fr; }
  .conversation-mixer[open] > summary,
  .conversation-mixer[open] .conversation-mixer-dock { grid-column:1; }
}
/* v0.9.78 follow-up: action row itself spans the conversation card, so open
   settings/assignment controls cannot consume the name column. */
.conversation-card-actions { grid-column:1 / -1; width:100%; justify-content:flex-end; }
.conversation-card-actions .conversation-mixer[open],
.conversation-card-actions .conversation-seat-assign[open] { flex:1 1 100%; max-width:100%; }

/* v0.9.79: Unified conversation/player card actions.
   Gears and assignment menus are overlays; they must never change card geometry. */
.conversation-participant {
  grid-template-columns:minmax(82px,32%) minmax(0,1fr);
  grid-template-rows:1fr auto;
  padding:10px 42px 42px 10px;
  min-height:132px;
  align-items:center;
}
.conversation-participant .conversation-face,
.conversation-participant .conversation-face.avatar-only,
.conversation-participant .conversation-face.developer-fake-face {
  align-self:center;
}
.conversation-card-actions {
  position:absolute;
  inset:0;
  pointer-events:none;
  display:block;
  width:auto;
  grid-column:auto;
}
.conversation-card-actions > * { pointer-events:auto; }
.conversation-card-gear,
.conversation-mixer > summary.conversation-card-gear,
.conversation-own-settings.conversation-card-gear {
  position:absolute;
  top:10px;
  right:10px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  min-width:30px;
  padding:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(255,255,255,.045);
  color:var(--muted);
  cursor:pointer;
  list-style:none;
}
.conversation-card-gear:hover,
.conversation-mixer[open] > summary.conversation-card-gear,
.conversation-own-settings.conversation-card-gear:hover {
  color:var(--text);
  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.18);
}
.conversation-mixer > summary.conversation-card-gear::-webkit-details-marker,
.conversation-seat-assign > summary::-webkit-details-marker { display:none; }
.conversation-mixer.conversation-floating-popover,
.conversation-seat-assign.conversation-floating-popover {
  position:static;
  min-width:0;
}
.conversation-mixer.conversation-floating-popover[open],
.conversation-seat-assign.conversation-floating-popover[open] {
  width:auto;
  grid-column:auto;
  flex:0 0 auto;
}
.conversation-popover-panel {
  position:absolute;
  z-index:60;
  min-width:min(280px,calc(100vw - 32px));
  max-width:min(360px,calc(100vw - 32px));
  padding:10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  background:rgba(12,15,20,.97);
  box-shadow:0 18px 42px rgba(0,0,0,.52);
  backdrop-filter:blur(16px);
}
.conversation-mixer .conversation-popover-panel {
  top:46px;
  right:10px;
}
.conversation-seat-assign > summary {
  position:absolute;
  right:10px;
  bottom:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:5px 9px;
  border:1px solid rgba(156,124,255,.20);
  border-radius:10px;
  background:rgba(156,124,255,.085);
  color:#ded7ff;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  list-style:none;
}
.conversation-seat-assign > summary:hover,
.conversation-seat-assign[open] > summary {
  background:rgba(156,124,255,.15);
  border-color:rgba(156,124,255,.36);
}
.conversation-seat-assign .conversation-popover-panel {
  right:10px;
  bottom:46px;
}
.conversation-seat-assign-menu {
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  width:auto;
}
.conversation-own-inline-actions {
  max-width:100%;
  flex-wrap:wrap;
  padding-right:0;
}
.game-conversation-panel .conversation-participant,
.conversation-participant.compact-participant {
  min-height:82px;
  padding:7px 38px 34px 7px;
}
.game-conversation-panel .conversation-seat-assign { display:none; }
body[data-game-conversation-density="small"] .game-conversation-panel .conversation-participant {
  grid-template-columns:58px minmax(0,1fr);
}
body[data-game-conversation-density="medium"] .game-conversation-panel .conversation-participant,
body[data-game-conversation-density="large"] .game-conversation-panel .conversation-participant {
  grid-template-columns:minmax(92px,32%) minmax(0,1fr);
}

/* v0.9.79: setup and active room cards share one stable seat-card viewport. */
.game-seat-layout {
  grid-auto-rows:1fr;
  --game-seat-preview-height:clamp(170px,18vw,235px);
}
.game-seat {
  display:grid;
  grid-template-rows:minmax(44px,auto) auto minmax(var(--game-seat-preview-height),var(--game-seat-preview-height)) auto;
  min-height:0;
}
.game-seat.empty-seat {
  grid-template-rows:minmax(44px,auto) minmax(var(--game-seat-preview-height),var(--game-seat-preview-height)) auto;
}
.game-seat.empty-seat .game-seat-empty {
  min-height:var(--game-seat-preview-height);
}
.game-seat-media,
.game-seat-camera,
.game-seat-camera.developer-fake-seat-camera {
  min-height:var(--game-seat-preview-height);
  height:var(--game-seat-preview-height);
  max-height:var(--game-seat-preview-height);
}
.game-seat-camera > video,
.game-seat-camera > img,
.game-seat-camera.developer-fake-seat-camera > img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.game-seat-head.game-seat-head-v2 {
  min-height:44px;
  align-self:start;
}
.header-actions.game-setup-actions {
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* v0.9.79: 2HG life counters are bottom-band controls. When the dock opens,
   raise them instead of letting the toolbar cover them. */
body.game-view-active .game-team-life-overlay[data-team-life-overlay] {
  transition:top .16s ease, left .16s ease, transform .16s ease;
}
body.game-view-active .game-team-life-overlay[data-team-life-axis="horizontal"],
body.game-view-active .game-team-life-overlay[data-team-life-axis="vertical"] {
  transform:translate(-50%,-50%);
}
body.game-view-active:has(.game-view-toolbar:hover) .game-team-life-overlay[data-team-life-own="1"],
body.game-view-active:has(.game-view-toolbar:focus-within) .game-team-life-overlay[data-team-life-own="1"] {
  top:calc(100% - 118px) !important;
}

/* v0.9.80: hard geometry contract for setup seats, conversation media,
   popover actions and 2HG counters. Keep phase-specific data out of geometry. */
.game-seat-layout {
  grid-auto-rows:minmax(360px,auto);
  align-items:stretch;
  --game-seat-preview-height:auto;
}
.game-seat,
.game-seat.empty-seat {
  min-height:clamp(360px,38vw,520px);
  display:grid;
  align-content:stretch;
  gap:10px;
}
.game-seat { grid-template-rows:minmax(44px,auto) auto minmax(0,1fr) auto; }
.game-seat.empty-seat { grid-template-rows:minmax(44px,auto) minmax(0,1fr) auto; }
.game-seat-media,
.game-seat-camera,
.game-seat-camera.developer-fake-seat-camera,
.game-seat-empty {
  width:100%;
  height:100%;
  min-height:220px;
  max-height:none;
  align-self:stretch;
}
.game-seat-camera,
.game-seat-camera.developer-fake-seat-camera { aspect-ratio:auto; }
.game-seat-camera > video,
.game-seat-camera > img,
.game-seat-camera.developer-fake-seat-camera > img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.game-seat-head.game-seat-head-v2 {
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  min-height:44px;
}
.game-seat-head-v2 > .game-seat-person,
.game-seat-head-v2 > .game-seat-player-tools,
.game-seat-head-v2 > .game-seat-face { align-self:center; }
.game-seat-head-v2 > .game-seat-player-tools {
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  min-height:34px;
  overflow:visible;
}
.game-seat-head-v2 .game-hud-media-toggles,
.game-seat-head-v2 .player-mini-media-row,
.game-seat-head-v2 .player-card-audio { display:flex; align-items:center; flex-flow:row nowrap; }
.game-seat-name-row { align-items:center; }
.deck-color-picker {
  grid-template-columns:auto auto;
  width:max-content;
  max-width:100%;
  align-items:center;
}
.deck-color-picker-copy { min-width:auto; }
.deck-color-picker-copy span:empty { display:none; }
.deck-color-picker[data-deck-color-suggestion="1"] .deck-color-picker-copy span { display:none; }
.deck-color-wheel { align-items:center; }

.room-conversation .conversation-participant:not(.compact-participant),
.conversation-video-grid > .conversation-participant {
  grid-template-columns:minmax(170px,230px) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  min-height:190px;
  align-items:stretch;
  padding:10px 48px 42px 10px;
}
.room-conversation .conversation-face,
.conversation-video-grid .conversation-face {
  aspect-ratio:16/9;
  min-height:132px;
  height:100%;
  align-self:stretch;
}
.room-conversation .conversation-face.avatar-only { min-height:132px; }
.conversation-person-copy { align-self:center; }
.conversation-card-actions { position:absolute; inset:0; pointer-events:none; }
.conversation-card-actions > * { pointer-events:auto; }
.conversation-seat-assign.conversation-floating-popover {
  position:absolute;
  right:10px;
  bottom:10px;
  min-width:0;
  width:auto;
}
.conversation-seat-assign > summary {
  position:static;
  right:auto;
  bottom:auto;
}
.conversation-seat-assign .conversation-popover-panel {
  right:0;
  bottom:calc(100% + 8px);
}
.conversation-seat-assign[open] { width:auto; }
.conversation-seat-assign[open] > summary { margin-bottom:0; }
.conversation-mixer.conversation-floating-popover[open] { position:absolute; right:10px; top:10px; }
.conversation-mixer .conversation-popover-panel { top:36px; right:0; }
.game-conversation-panel .conversation-participant:not(.compact-participant) {
  grid-template-columns:minmax(160px,240px) minmax(0,1fr);
  min-height:178px;
}
.game-conversation-panel .conversation-face { aspect-ratio:16/9; min-height:124px; }
.game-conversation-panel .conversation-own-settings.conversation-card-gear { display:grid; }
@media (max-width:760px) {
  .room-conversation .conversation-participant:not(.compact-participant),
  .conversation-video-grid > .conversation-participant,
  .game-conversation-panel .conversation-participant:not(.compact-participant) {
    grid-template-columns:128px minmax(0,1fr);
    min-height:154px;
  }
  .room-conversation .conversation-face,
  .conversation-video-grid .conversation-face,
  .game-conversation-panel .conversation-face { min-height:96px; }
}

body.game-view-active .game-team-life-overlay[data-team-life-side="top"] { transform:translate(-50%,-50%); }
body.game-view-active .game-team-life-overlay[data-team-life-side="bottom"] { transform:translate(-50%,-50%); }
body.game-view-active .game-team-life-overlay[data-team-life-side="left"] { transform:translate(-50%,-50%); }
body.game-view-active .game-team-life-overlay[data-team-life-side="right"] { transform:translate(-50%,-50%); }
body.game-view-active:has(.game-view-toolbar:hover) .game-team-life-overlay[data-team-life-own="1"][data-team-life-side="bottom"],
body.game-view-active:has(.game-view-toolbar:focus-within) .game-team-life-overlay[data-team-life-own="1"][data-team-life-side="bottom"] {
  top:calc(100% - 126px) !important;
}

/* v0.9.81: hard reset for conversation/player cards after v0.9.80 realtest.
   Names must remain horizontal and visible, @handles are not part of normal UI,
   assignment belongs to the card, and 2HG team counters are opaque edge controls. */
.conversation-participant {
  position:relative !important;
  overflow:visible;
  min-width:0;
  isolation:isolate;
}
.conversation-person-copy {
  min-width:0;
  max-width:100%;
  align-self:end;
}
.conversation-person-name {
  display:flex;
  flex-flow:row wrap;
  align-items:center;
  gap:7px;
  min-width:0;
  max-width:100%;
}
.conversation-person-name strong,
.game-seat-name-row strong,
body.game-view-active .board-player {
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  hyphens:auto;
}
.conversation-person-copy > span { display:none !important; }
body.game-view-active .stat-note { display:none !important; }

.room-conversation .conversation-participant.density-room:not(.compact-participant) {
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:minmax(190px,1fr) auto !important;
  min-height:clamp(330px,34vw,440px) !important;
  padding:10px 48px 46px 10px !important;
  align-items:stretch !important;
}
.room-conversation .conversation-participant.density-room:not(.compact-participant) .conversation-face {
  grid-column:1;
  grid-row:1;
  width:100%;
  min-height:190px !important;
  height:100% !important;
  aspect-ratio:16/9;
  align-self:stretch !important;
}
.room-conversation .conversation-participant.density-room:not(.compact-participant) .conversation-person-copy {
  grid-column:1;
  grid-row:2;
  align-self:end;
  padding-right:0;
}
.room-conversation .conversation-participant.density-room:not(.compact-participant) .conversation-badges {
  margin-top:6px;
}

.game-conversation-panel .conversation-participant:not(.compact-participant),
.conversation-video-grid > .conversation-participant:not(.compact-participant) {
  grid-template-columns:minmax(170px,230px) minmax(220px,1fr) !important;
  grid-template-rows:minmax(0,1fr) !important;
  min-height:178px !important;
  padding:10px 48px 42px 10px !important;
  align-items:center !important;
}
.game-conversation-panel .conversation-face,
.conversation-video-grid .conversation-face {
  min-height:132px !important;
  aspect-ratio:16/9;
}
.conversation-compact-grid .conversation-participant.compact-participant {
  grid-template-columns:48px minmax(130px,1fr) !important;
  padding:7px 38px 8px 7px !important;
  min-height:74px !important;
}
.conversation-participant.compact-participant .conversation-person-name strong {
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.conversation-card-actions {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  pointer-events:none !important;
  width:auto !important;
  min-width:0 !important;
  z-index:6;
}
.conversation-card-actions > * { pointer-events:auto !important; }
.conversation-card-actions > .conversation-seat-assign.conversation-floating-popover {
  position:absolute !important;
  right:10px !important;
  bottom:10px !important;
  top:auto !important;
  left:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:calc(100% - 20px);
  margin:0 !important;
  transform:none !important;
}
.conversation-card-actions > .conversation-seat-assign.conversation-floating-popover > summary {
  position:relative !important;
  inset:auto !important;
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  margin:0 !important;
  white-space:nowrap;
}
.conversation-card-actions > .conversation-seat-assign.conversation-floating-popover .conversation-popover-panel {
  right:0 !important;
  bottom:calc(100% + 8px) !important;
  top:auto !important;
  left:auto !important;
}
.conversation-card-actions > .conversation-mixer.conversation-floating-popover,
.conversation-card-actions > .conversation-own-settings.conversation-card-gear {
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  left:auto !important;
  bottom:auto !important;
  margin:0 !important;
}
.conversation-card-actions > .conversation-mixer.conversation-floating-popover > summary.conversation-card-gear {
  position:relative !important;
  top:auto !important;
  right:auto !important;
}
.conversation-card-actions > .conversation-mixer.conversation-floating-popover .conversation-popover-panel {
  top:36px !important;
  right:0 !important;
}

body.game-view-active .game-hud-identity {
  max-width:min(320px,34vw) !important;
  min-width:0;
}
body.game-view-active .board-player {
  display:block;
  max-width:100%;
  line-height:1.1;
}
body.game-view-active .board-player-line {
  align-items:center;
}

body.game-view-active .game-team-life-overlay[data-game-team-life-overlay] {
  z-index:58;
  pointer-events:auto;
}
body.game-view-active .game-team-life-overlay[data-game-team-life-overlay] .game-life-control.team-life {
  background:#090c11 !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08) !important;
  backdrop-filter:none !important;
}
body.game-view-active .game-team-life-overlay[data-game-team-life-overlay] .game-team-life-label {
  background:#090c11 !important;
  color:#f1f3f7;
  border:1px solid rgba(255,255,255,.16);
  border-bottom:0;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
}
body.game-view-active:has(.game-view-toolbar:hover) .game-team-life-overlay[data-team-life-own="1"][data-team-life-side="bottom"],
body.game-view-active:has(.game-view-toolbar:focus-within) .game-team-life-overlay[data-team-life-own="1"][data-team-life-side="bottom"] {
  top:calc(100% - 104px) !important;
}

body.game-view-active .board-grid.gv-layout-three-team-left,
body.game-view-active .board-grid.gv-layout-three-team-right {
  grid-template-columns:minmax(0,var(--gv-split-x)) minmax(0,calc(100% - var(--gv-split-x))) !important;
  grid-template-rows:minmax(0,var(--gv-split-y)) minmax(0,calc(100% - var(--gv-split-y))) !important;
}
body.game-view-active .board-grid.gv-layout-three-team-left .gv-slot-3,
body.game-view-active .board-grid.gv-layout-three-team-right .gv-slot-3 {
  min-height:0;
}
body.game-view-active .board-grid.gv-layout-three-team-left .gv-slot-3 > [data-board-role-slot="board"],
body.game-view-active .board-grid.gv-layout-three-team-right .gv-slot-3 > [data-board-role-slot="board"],
body.game-view-active .board-grid.gv-layout-three-team-left .gv-slot-3 .board-video-stage,
body.game-view-active .board-grid.gv-layout-three-team-right .gv-slot-3 .board-video-stage {
  width:100%;
  height:100%;
  min-height:0;
}


/* v0.9.83: realtest hardening for conversation cards.
   Assignment controls are footer content inside the card, Room media is always
   landscape, and Game conversation copy starts next to the video. */
.room-conversation .conversation-participant-grid {
  grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr)) !important;
  align-items:start !important;
  gap:12px !important;
}
.room-conversation .conversation-participant.density-room:not(.compact-participant) {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  padding:10px !important;
  align-items:start !important;
  overflow:visible !important;
}
.room-conversation .conversation-participant.density-room:not(.compact-participant) .conversation-face,
.room-conversation .conversation-participant.density-room:not(.compact-participant) .conversation-face.avatar-only,
.room-conversation .conversation-participant.density-room:not(.compact-participant) .conversation-face.developer-fake-face {
  grid-column:1 !important;
  grid-row:1 !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:16/9 !important;
  align-self:start !important;
}
.room-conversation .conversation-participant.density-room:not(.compact-participant) .conversation-face video,
.room-conversation .conversation-participant.density-room:not(.compact-participant) .conversation-face > img {
  object-fit:cover !important;
}
.room-conversation .conversation-participant.density-room:not(.compact-participant) .conversation-person-copy {
  grid-column:1 !important;
  grid-row:2 !important;
  align-self:start !important;
  margin-top:8px !important;
  padding-right:42px !important;
}
.room-conversation .conversation-person-name strong,
.game-conversation-panel .conversation-person-name strong,
.conversation-video-grid .conversation-person-name strong {
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}
.conversation-card-top-actions {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  pointer-events:none !important;
  z-index:7 !important;
}
.conversation-card-top-actions > * { pointer-events:auto !important; }
.conversation-card-footer-actions {
  grid-column:1 !important;
  grid-row:3 !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  min-height:32px !important;
  margin-top:8px !important;
  pointer-events:auto !important;
}
.conversation-card-footer-actions .conversation-seat-assign.conversation-floating-popover {
  position:relative !important;
  right:auto !important;
  bottom:auto !important;
  top:auto !important;
  left:auto !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 !important;
  transform:none !important;
}
.conversation-card-footer-actions .conversation-seat-assign > summary {
  position:static !important;
  inset:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  white-space:nowrap !important;
  margin:0 !important;
}
.conversation-card-footer-actions .conversation-seat-assign .conversation-popover-panel {
  right:0 !important;
  bottom:calc(100% + 8px) !important;
  top:auto !important;
  left:auto !important;
}
.room-conversation .conversation-card-actions > .conversation-seat-assign,
.room-conversation .conversation-card-top-actions > .conversation-seat-assign { display:none !important; }

.game-conversation-panel .conversation-participant:not(.compact-participant),
.conversation-video-grid > .conversation-participant:not(.compact-participant) {
  grid-template-columns:minmax(180px,280px) minmax(0,1fr) !important;
  grid-template-rows:auto !important;
  align-items:start !important;
  min-height:160px !important;
  padding:10px 48px 10px 10px !important;
}
.game-conversation-panel .conversation-participant:not(.compact-participant) .conversation-face,
.conversation-video-grid > .conversation-participant:not(.compact-participant) .conversation-face {
  grid-column:1 !important;
  grid-row:1 !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16/9 !important;
  align-self:start !important;
}
.game-conversation-panel .conversation-participant:not(.compact-participant) .conversation-person-copy,
.conversation-video-grid > .conversation-participant:not(.compact-participant) .conversation-person-copy {
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:start !important;
  margin-top:4px !important;
}
@media (min-width:1400px) {
  .room-conversation .conversation-participant-grid { grid-template-columns:repeat(auto-fill,minmax(380px,1fr)) !important; }
}
@media (max-width:840px) {
  .room-conversation .conversation-participant-grid { grid-template-columns:1fr !important; }
  .game-conversation-panel .conversation-participant:not(.compact-participant),
  .conversation-video-grid > .conversation-participant:not(.compact-participant) {
    grid-template-columns:1fr !important;
    padding:10px 48px 10px 10px !important;
  }
  .game-conversation-panel .conversation-participant:not(.compact-participant) .conversation-person-copy,
  .conversation-video-grid > .conversation-participant:not(.compact-participant) .conversation-person-copy {
    grid-column:1 !important;
    grid-row:2 !important;
  }
}

body.game-view-active .game-team-life-overlay[data-game-team-life-overlay] .game-life-control.team-life,
body.game-view-active .game-team-life-overlay[data-game-team-life-overlay] .game-team-life-label {
  background:#090c11 !important;
  backdrop-filter:none !important;
}

/* v0.9.94: media quick controls are one horizontal contract everywhere, and
   deck colors are shared live state shown in room cards, seat cards and HUDs. */
.game-hud-media-toggles,
body.game-view-active .game-hud-media-toggles,
.conversation-own-inline-actions .game-hud-media-toggles,
.game-seat-head-v2 .game-seat-player-tools .game-hud-media-toggles,
.board-player-line .game-hud-media-toggles {
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  grid-template-columns:none !important;
  grid-template-rows:none !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  gap:4px !important;
  white-space:nowrap !important;
}
.game-hud-quick-cluster,
.conversation-own-inline-actions,
.game-seat-head-v2 > .game-seat-player-tools,
.game-seat-head-v2 .player-mini-media-row,
.game-seat-head-v2 .player-card-audio,
body.game-view-active .game-hud-quick-cluster,
body.game-view-active .game-player-face-controls {
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:4px !important;
  white-space:nowrap !important;
}
.game-hud-media-toggle,
.conversation-own-inline-actions .conversation-afk-inline,
body.game-view-active .game-hud-afk-toggle,
.game-seat-head-v2 .game-seat-player-tools .game-hud-media-toggle {
  flex:0 0 auto !important;
  display:grid !important;
  place-items:center !important;
}
.conversation-deck-colors,
.seat-deck-colors,
.game-deck-color-hud.deck-color-readout {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  flex:0 0 auto;
  min-width:0;
  min-height:16px;
}
.game-deck-color-hud.deck-color-readout[hidden] { display:none !important; }
.conversation-person-name .conversation-deck-colors { margin-left:1px; }
.game-seat-name-row .seat-deck-colors { margin-left:1px; }
.conversation-deck-colors .mana-color-symbol.hud,
.seat-deck-colors .mana-color-symbol.hud,
.game-deck-color-hud.deck-color-readout .mana-color-symbol.hud {
  width:14px;
  height:14px;
}

/* v0.9.85: 3p/4p 2HG polish and own room conversation controls.
   The solo-opponent role is not a visible Game View label; own room media
   controls sit in the same horizontal row as deck colors so own cards keep the
   same height as other room conversation cards. */
.conversation-person-name .conversation-own-room-controls {
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  margin-left:4px !important;
  white-space:nowrap !important;
  vertical-align:middle !important;
}
.conversation-person-name .conversation-own-room-controls .game-hud-media-toggles,
.conversation-person-name .conversation-own-room-controls .game-hud-media-toggle,
.conversation-person-name .conversation-own-room-controls .conversation-afk-inline {
  flex:0 0 auto !important;
}
.room-conversation .conversation-participant.density-room:not(.compact-participant) .conversation-own-inline-actions {
  display:none !important;
}
.game-team-badge.solo { display:none !important; }
body.game-view-active .game-team-life-overlay[data-team-life-side="left"] .game-life-control.team-life,
body.game-view-active .game-team-life-overlay[data-team-life-side="right"] .game-life-control.team-life,
body.game-view-active .game-team-life-overlay[data-team-life-side="left"] .game-team-life-label,
body.game-view-active .game-team-life-overlay[data-team-life-side="right"] .game-team-life-label {
  background:#090c11 !important;
  border-color:rgba(255,255,255,.22) !important;
}

/* v0.9.86: remote mute state sits directly beside the voice meter in
   conversation cards and opponent HUD/audio chips. Hidden reconnect states are
   represented as normal mic-off/mute controls for the local Browser mic. */
.conversation-voice-state {
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:0;
  flex:0 0 auto;
}
.conversation-voice-state.unavailable { display:none; }
.conversation-voice-state .conversation-voice-level { flex:0 0 auto; }
.conversation-voice-muted,
.player-card-self-muted {
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  min-width:18px;
  border-radius:999px;
  background:rgba(255,180,120,.11);
  color:#ffccad;
  box-shadow:inset 0 0 0 1px rgba(255,190,130,.22);
}
.conversation-voice-muted[hidden],
.player-card-self-muted[hidden] { display:none !important; }
.player-card-audio.remote-audio > .conversation-voice-state { flex:0 0 auto; }
.player-card-audio.remote-audio .conversation-voice-level { flex:0 0 38px; width:38px; min-width:38px; height:7px; }
.voice-hud .voice-self-muted { order:2; }
.voice-hud .voice-hud-button { order:3; }

/* v0.9.86: every bottom 2HG team counter, own or opponent, avoids the toolbar
   when the toolbar opens. */
body.game-view-active:has(.game-view-toolbar:hover) .game-team-life-overlay[data-team-life-side="bottom"],
body.game-view-active:has(.game-view-toolbar:focus-within) .game-team-life-overlay[data-team-life-side="bottom"] {
  top:calc(100% - 104px) !important;
}

/* v0.9.94: read-only life counters keep the number visually centered, and
   transient life-change sums show the last five seconds of adjustments. */
.game-life-control.readonly {
  min-width:72px !important;
  padding-inline:12px;
  justify-content:center;
}
.game-life-control.readonly strong {
  position:relative !important;
  inset:auto !important;
  width:100%;
  min-width:46px;
  padding:0 !important;
  text-align:center;
  justify-self:center;
}
body.game-view-active .game-life-control.readonly { min-width:78px !important; }
.game-life-delta {
  position:absolute;
  left:50%;
  bottom:calc(100% + 5px);
  z-index:6;
  transform:translateX(-50%);
  display:inline-grid;
  place-items:center;
  min-width:34px;
  height:20px;
  padding:0 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:#10141c;
  color:#f5f7fb;
  font-size:12px;
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.2);
  pointer-events:none;
  white-space:nowrap;
}
.game-life-delta.positive { color:#bcffd2; border-color:rgba(110,255,160,.34); }
.game-life-delta.negative { color:#ffc3b8; border-color:rgba(255,130,105,.38); }
.game-life-delta[hidden] { display:none !important; }
body.game-view-active .game-team-life-overlay[data-team-life-side="top"] .game-life-delta {
  top:calc(100% + 5px);
  bottom:auto;
}
body.game-view-active .game-team-life-overlay[data-team-life-side="left"] .game-life-delta,
body.game-view-active .game-team-life-overlay[data-team-life-side="right"] .game-life-delta {
  bottom:calc(100% + 4px);
}

/* v0.9.94: Magic-Tower logo mark, avatar settings entry, CSP-safe voice meters,
   local remote-mute overlays, and visible life-delta badges. */
.brand-mark {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 35% 25%, rgba(126,196,255,.24), transparent 42%), linear-gradient(145deg, #151b25, #080b10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 9px 24px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.06);
}
.brand-mark img { width: 32px; height: 32px; display: block; }
.identity {
  position: relative;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid transparent;
}
.identity:hover {
  background: rgba(255,255,255,.045);
  border-color: var(--border-soft);
}
.identity-avatar-shell { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; }
.identity .avatar {
  background: transparent;
  overflow: visible;
}
.identity .player-avatar.identity-player-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 12px;
  font-size: 16px;
}
.identity-live-dot {
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--faint);
  border: 2px solid #0e1115;
  box-shadow: 0 0 0 2px rgba(105,116,128,.14);
}
.identity-live-dot[data-realtime-state="online"] { background: var(--success); box-shadow: 0 0 0 2px rgba(85,201,145,.16), 0 0 12px rgba(85,201,145,.32); }
.identity-live-dot[data-realtime-state="connecting"] { background: var(--warning); box-shadow: 0 0 0 2px rgba(230,184,92,.18); }
body.sidebar-collapsed .identity { padding-left: 8px; padding-right: 8px; }
body.sidebar-collapsed .identity .avatar { width: 36px; height: 36px; min-width: 36px; }
body.sidebar-collapsed .identity-live-dot { left: 1px; bottom: 1px; }

/* CSP-safe meters: no inline custom property is needed. The value attribute drives
   the native meter fill in Edge/Chrome/Firefox. */
meter.voice-level-meter,
meter.conversation-voice-level[data-local-voice-level],
meter.conversation-voice-level[data-voice-level],
.voice-hud meter[data-local-voice-level],
.voice-hud meter[data-voice-level] {
  appearance: auto;
  -webkit-appearance: meter;
  background: rgba(255,255,255,.13) !important;
}
meter.voice-level-meter::-webkit-meter-bar,
meter.conversation-voice-level[data-local-voice-level]::-webkit-meter-bar,
meter.conversation-voice-level[data-voice-level]::-webkit-meter-bar,
.voice-hud meter[data-local-voice-level]::-webkit-meter-bar,
.voice-hud meter[data-voice-level]::-webkit-meter-bar {
  background: rgba(255,255,255,.13);
  border: 0;
  border-radius: 999px;
}
meter.voice-level-meter::-webkit-meter-optimum-value,
meter.voice-level-meter::-webkit-meter-suboptimum-value,
meter.voice-level-meter::-webkit-meter-even-less-good-value,
meter.conversation-voice-level::-webkit-meter-optimum-value,
.voice-hud meter::-webkit-meter-optimum-value {
  background: rgba(92,216,139,.95);
  border-radius: 999px;
}
meter.voice-level-meter::-moz-meter-bar,
meter.conversation-voice-level::-moz-meter-bar,
.voice-hud meter::-moz-meter-bar {
  background: rgba(92,216,139,.95);
  border-radius: 999px;
}
.conversation-voice-meter-wrap { position: relative; display: inline-grid; align-items: center; }
.conversation-voice-meter-wrap > meter { grid-area: 1 / 1; }
.conversation-voice-local-muted {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: center;
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(12,14,18,.78);
  color: #ffd2d2;
  box-shadow: 0 0 0 1px rgba(255,210,210,.28), 0 4px 12px rgba(0,0,0,.42);
  pointer-events: auto;
  z-index: 2;
}
.conversation-voice-local-muted .ui-icon { width: 10px; height: 10px; }
.conversation-voice-local-muted[hidden] { display: none !important; }
.voice-hud .conversation-voice-meter-wrap { order: 1; }
.voice-hud-local-muted { pointer-events: auto; }

.game-life-control { overflow: visible !important; }
.game-life-control > .game-life-half { overflow: hidden; }
.game-life-delta {
  z-index: 80;
  opacity: 0;
  transform: translate(-50%, 4px) scale(.96);
  transition: opacity .12s ease, transform .12s ease;
}
.game-life-delta:not([hidden]) {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
body.game-view-active .game-life-control .game-life-delta { bottom: calc(100% + 8px); }
body.game-view-active .game-team-life-overlay[data-team-life-side="top"] .game-life-delta { top: calc(100% + 8px); bottom: auto; }

/* v0.9.94 follow-up: setup/current-game seat cards must never protrude
   beyond the main content column on wide displays. Child media/DEV-board
   images are clipped to their card, while the grid keeps equal columns. */
#game-area,
.room-game-panel,
.room-game-panel .game-list,
.room-game-panel .card,
.room-game-panel .game-seat-layout {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.room-game-panel .game-seat-layout {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow-x: clip;
}
.room-game-panel .game-seat-layout.seats-2,
.room-game-panel .game-seat-layout.seats-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.room-game-panel .game-seat-layout.seats-3 .game-seat:first-child {
  max-width: 100%;
}
.room-game-panel .game-seat,
.room-game-panel .game-seat-media,
.room-game-panel .game-seat-camera,
.room-game-panel .game-seat-camera.developer-fake-seat-camera,
.room-game-panel .game-seat-empty {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.room-game-panel .game-seat-head.game-seat-head-v2,
.room-game-panel .game-seat-name-row,
.room-game-panel .game-seat-player-tools {
  min-width: 0;
  max-width: 100%;
}
.room-game-panel .game-seat-camera > video,
.room-game-panel .game-seat-camera > img,
.room-game-panel .game-seat-camera.developer-fake-seat-camera > img {
  max-width: 100%;
  max-height: 100%;
}
@media (max-width: 860px) {
  .room-game-panel .game-seat-layout,
  .room-game-panel .game-seat-layout.seats-2,
  .room-game-panel .game-seat-layout.seats-4 {
    grid-template-columns: 1fr;
  }
  .room-game-panel .game-seat-layout.seats-3 .game-seat:first-child {
    width: auto;
    justify-self: stretch;
  }
}

/* v0.9.94: setup/menu/rematch polish after realtest. */
.sidebar-realtime { display: none !important; }
.account-devices-title {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.identity-avatar-shell,
.identity .avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
}
.identity .avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
}
.identity .player-avatar.identity-player-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  margin: 0;
  display: grid;
  place-items: center;
  object-fit: cover;
  object-position: center;
}
body.sidebar-collapsed .identity-avatar-shell,
body.sidebar-collapsed .identity .avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
}
body.sidebar-collapsed .identity .player-avatar.identity-player-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
}
.conversation-voice-local-muted {
  width: 18px;
  height: 18px;
  background: transparent;
  color: #ffd2d2;
  box-shadow: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.72));
}
.conversation-voice-local-muted .ui-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.7;
}
.game-setup-seat-notice {
  margin: 8px 0 10px;
}
.room-game-panel .game-seat-layout,
.room-game-panel .game-seat-layout.seats-2,
.room-game-panel .game-seat-layout.seats-3,
.room-game-panel .game-seat-layout.seats-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.room-game-panel .game-seat-layout.seats-3 .game-seat:first-child {
  grid-column: auto;
  width: auto;
  justify-self: stretch;
}
.room-game-panel .game-seat-media {
  justify-items: center;
  align-items: center;
}
.room-game-panel .game-seat-camera,
.room-game-panel .game-seat-camera.developer-fake-seat-camera,
.room-game-panel .game-seat-empty {
  width: min(100%, 760px);
  justify-self: center;
}
@media (max-width: 860px) {
  .room-game-panel .game-seat-layout,
  .room-game-panel .game-seat-layout.seats-2,
  .room-game-panel .game-seat-layout.seats-3,
  .room-game-panel .game-seat-layout.seats-4 {
    grid-template-columns: 1fr;
  }
}

/* v0.9.94: setup polish after realtest. Missing board placeholders use
   the same viewport height as real/fake boards, deck colors are always visible
   in setup cards, and active-game room previews stay clipped inside cards. */
.room-game-panel .game-seat-camera.missing {
  aspect-ratio: 16 / 9;
  min-height: var(--game-seat-preview-height, clamp(180px, 28vw, 270px));
  height: auto;
  width: min(100%, 760px);
  justify-self: center;
}
.room-game-panel .game-seat-media { min-height: var(--game-seat-preview-height, clamp(180px, 28vw, 270px)); }
.room-game-panel .game-seat-media > .game-seat-camera { min-height: var(--game-seat-preview-height, clamp(180px, 28vw, 270px)); }
.room-game-panel .board-grid,
.room-game-panel .board-tile,
.room-game-panel .board-tile > [data-board-role-slot="board"],
.room-game-panel .board-video-stage,
.room-game-panel .board-video-placeholder {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
body:not(.game-view-active) .room-game-panel .board-grid {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:not(.game-view-active) .room-game-panel .board-tile > [data-board-role-slot="board"] > .board-video-stage,
body:not(.game-view-active) .room-game-panel .board-tile > [data-board-role-slot="board"] > .board-video-placeholder {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}
body:not(.game-view-active) .room-game-panel .board-video-stage video,
body:not(.game-view-active) .room-game-panel .board-video-stage img,
body:not(.game-view-active) .room-game-panel .board-video-stage canvas {
  max-width: 100%;
  max-height: 100%;
}
.room-game-panel .game-seat > .deck-color-picker {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  margin: 2px 0 0;
  box-sizing: border-box;
}
.room-game-panel .deck-color-wheel { justify-content: flex-end; flex-wrap: nowrap; }
.deck-color-picker.readonly .deck-color-button { cursor: default; }
.deck-color-button:not(.selected):not(.suggested) { opacity: .30; filter: grayscale(.35) brightness(.72); }
.deck-color-button:not(.selected):not(.suggested):hover { opacity: .42; transform: none; }
.deck-color-picker.readonly .deck-color-button:not(.selected):not(.suggested) { opacity: .24; }
.deck-color-picker.readonly .deck-color-button:hover { transform: none; }
.deck-color-picker.editable .deck-color-button:not(.selected):not(.suggested) { background: rgba(0,0,0,.18); }

/* v0.9.94: larger click target for the Medien & Geräte accordion header. */
.room-media-settings > .room-accordion-header {
  width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  cursor: pointer;
}
.room-media-settings > .room-accordion-header > div { pointer-events: none; }
.room-media-settings > .room-accordion-header .room-accordion-chevron { pointer-events: none; }

/* v0.9.94: local remote mute and player HUD icon polish. */
.conversation-voice-local-muted {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.conversation-voice-local-muted .ui-icon {
  width: 18px;
  height: 18px;
  stroke-width: 3;
}
body.game-view-active .game-hud-afk-toggle { color:#fff; opacity:1; }
body.game-view-active .game-hud-afk-toggle:hover { color:#fff; }

/* v0.9.94: life-delta stays readable, then slowly fades after two seconds. */
.game-life-delta { transition: opacity 3s ease, transform 3s ease; }
.game-life-delta.fading { opacity: 0; transform: translate(-50%, -2px) scale(.92); }

/* v0.9.94: game conversation can be maximized with title-bar double click. */
.game-conversation-panel.is-maximized {
  left: 8px !important;
  top: 8px !important;
  right: auto !important;
  bottom: auto !important;
  width: calc(100vw - 16px) !important;
  height: calc(100vh - 16px) !important;
  max-width: none !important;
  max-height: none !important;
}
.game-conversation-panel.is-maximized .game-conversation-resize-hint::after { content: " · Doppelklick: zurück"; }

/* v0.9.94 realtest hotfix: keep Room sections visually separated and
   center/expand active-game board previews inside the Room cards. */
[data-room-conversation-host] + .room-game-panel,
.room-media-settings + [data-room-conversation-host] {
  margin-top: 16px;
}
body:not(.game-view-active) .room-game-panel .board-tile > [data-board-role-slot="board"] {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
body:not(.game-view-active) .room-game-panel .board-tile > [data-board-role-slot="board"] > .board-video-stage,
body:not(.game-view-active) .room-game-panel .board-tile > [data-board-role-slot="board"] > .board-video-placeholder {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
body:not(.game-view-active) .room-game-panel .board-video-stage.media-role-board,
body:not(.game-view-active) .room-game-panel .board-video-placeholder.media-role-board {
  min-height: clamp(160px, 18vw, 230px);
}

/* v0.9.94 realtest hotfix: Room fullscreen control and foreground local audio popovers. */
.room-hero-actions .room-fullscreen-toggle {
  min-height: 34px;
  min-width: 38px;
}
.player-volume-control[open],
.conversation-mixer[open] {
  position: relative;
  z-index: 10070 !important;
}
.player-volume-popover,
.conversation-mixer-popover,
.conversation-popover-panel {
  z-index: 10071 !important;
}
.game-seat:has(.player-volume-control[open]),
.board-tile:has(.player-volume-control[open]),
.conversation-participant:has(.conversation-mixer[open]),
.conversation-participant:has(.player-volume-control[open]) {
  overflow: visible !important;
  z-index: 10060 !important;
}
.game-seat-head-v2,
.game-seat-player-tools,
.board-tile-head,
.board-player-media-tools,
.conversation-card-actions {
  overflow: visible !important;
}

/* v0.9.94 realtest hotfix: the whole visible accordion title bar is clickable,
   including the top padding/border band that users can otherwise hit by mistake. */
.room-media-settings > .room-accordion-header,
.room-conversation > .room-accordion-header {
  margin: -18px -18px 0;
  width: calc(100% + 36px);
  min-height: 66px;
  padding: 18px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.room-media-settings.collapsed > .room-accordion-header,
.room-conversation.collapsed > .room-accordion-header {
  border-radius: var(--radius);
}
.room-conversation > .room-accordion-header > div,
.room-conversation > .room-accordion-header .room-accordion-chevron {
  pointer-events: none;
}

/* v0.9.94 realtest hotfix: board-seat local volume popovers must be opaque
   foreground surfaces, not glass over the board/player card. */
.game-seat .player-volume-popover,
.board-tile .player-volume-popover {
  background: #101419 !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.55) !important;
  backdrop-filter: none !important;
}
.conversation-seat-assign[open] {
  position: relative;
  z-index: 10070 !important;
}
.conversation-seat-assign[open] .conversation-popover-panel {
  background: #101419 !important;
  z-index: 10071 !important;
}


/* v0.9.94 final hotfix: native image dragging must never replace the Magic-Tower
   seat-drag payload with an image URL, and AFK face tiles explain the black panel. */
[data-seat-drag-user] img,
[data-seat-drag-user] video {
  -webkit-user-drag: none;
  user-select: none;
}
.conversation-face.privacy-paused-face {
  min-height: 132px;
  background: #05070a !important;
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.86);
  text-align: center;
  padding: 14px;
}
.conversation-face-away-message {
  max-width: 90%;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}
body.game-view-active .conversation-face.privacy-paused-face { min-height: 108px; }

/* v0.9.94 final hotfix: top/opponent counters show their delta below the
   counter so the badge cannot leave the viewport. The badge is also a bit
   larger for couch-distance readability. */
.game-life-delta {
  min-width: 42px !important;
  height: 24px !important;
  padding: 0 9px !important;
  font-size: 14px !important;
}
body.game-view-active .board-tile.opponent-board .game-life-control .game-life-delta,
body.game-view-active .board-tile.gv-slot-1:not(.own-board) .game-life-control .game-life-delta,
body.game-view-active .board-tile.gv-slot-2:not(.own-board) .game-life-control .game-life-delta {
  top: calc(100% + 8px);
  bottom: auto;
}
body.game-view-active .board-tile.opponent-board .game-life-control .game-life-delta.fading,
body.game-view-active .board-tile.gv-slot-1:not(.own-board) .game-life-control .game-life-delta.fading,
body.game-view-active .board-tile.gv-slot-2:not(.own-board) .game-life-control .game-life-delta.fading {
  transform: translate(-50%, 2px) scale(.92);
}

/* v0.9.94: setup model is four permanent play slots; popovers/AFK panels are solid foreground UI. */
.game-seat-camera.privacy-paused-board,
.board-video-stage.privacy-paused-board {
  display:grid !important;
  place-items:center !important;
  min-height:var(--game-seat-preview-height, clamp(170px,18vw,235px));
  width:100%;
  aspect-ratio:16/9;
  background:#030507 !important;
  color:rgba(255,255,255,.88) !important;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  text-align:center;
  padding:16px;
  font-weight:850;
}
.board-video-stage.privacy-paused-board strong { font-size: clamp(14px,1.8vw,20px); }
.player-volume-popover { background:#101419 !important; z-index:10080 !important; }
.game-team-setup.compact { margin:0; padding:0; border:0; background:transparent; }
.game-team-setup.compact .game-setup-field { min-width:260px; }
.game-life-delta[data-life-delta-direction="down"] { top:calc(100% + 8px) !important; bottom:auto !important; left:50%; right:auto; transform:translateX(-50%); }
.game-life-delta[data-life-delta-direction="up"] { bottom:calc(100% + 8px) !important; top:auto !important; left:50%; right:auto; transform:translateX(-50%); }
.game-life-delta[data-life-delta-direction="right"] { left:calc(100% + 8px) !important; right:auto; top:50% !important; bottom:auto !important; transform:translateY(-50%); }
.game-life-delta[data-life-delta-direction="left"] { right:calc(100% + 8px) !important; left:auto !important; top:50% !important; bottom:auto !important; transform:translateY(-50%); }
.game-life-delta[data-life-delta-direction="down"].fading { transform:translate(-50%, 2px) scale(.92); }
.game-life-delta[data-life-delta-direction="up"].fading { transform:translate(-50%, -2px) scale(.92); }
.game-life-delta[data-life-delta-direction="right"].fading { transform:translate(2px, -50%) scale(.92); }
.game-life-delta[data-life-delta-direction="left"].fading { transform:translate(-2px, -50%) scale(.92); }

/* v0.10.0: camera-off is not AFK. Keep the same stable geometry while using a
   separate visual state/message so only explicit privacy pause says "kurz weg". */
.conversation-face.camera-disabled-face {
  min-height: 132px;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
  padding: 14px;
}
body.game-view-active .conversation-face.camera-disabled-face { min-height: 108px; }
.game-seat-camera.media-disabled-board,
.board-video-stage.media-disabled-board {
  background: var(--panel-2);
  color: var(--muted);
  display: grid;
  place-items: center;
  text-align: center;
}

/* v0.10.0: Platform-admin settings stay inside the regular Magic-Tower shell. */
.admin-index-card { display:grid; gap:18px; }
.admin-index-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.admin-index-stat { padding:14px 16px; border:1px solid var(--border-soft); border-radius:12px; background:var(--panel-2); display:grid; gap:4px; }
.admin-index-stat span,
.admin-index-details span { color:var(--muted); font-size:12px; }
.admin-index-stat strong { font-size:24px; line-height:1.1; }
.admin-index-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
.admin-index-details > div { display:grid; gap:4px; min-width:0; }
.admin-index-details strong { overflow-wrap:anywhere; }
.admin-index-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:4px; }
.admin-index-actions > div { min-width:0; }
.admin-index-error { overflow-wrap:anywhere; }
@media (max-width: 760px) {
  .admin-index-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-index-details { grid-template-columns:1fr; }
  .admin-index-actions { align-items:stretch; flex-direction:column; }
}

/* v0.10.2: per-open-card DE/EN detail language switch. */
.game-card-language-switch { display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(255,255,255,.035); }
.game-card-language-button { display:grid; place-items:center; width:27px; min-width:27px; height:23px; padding:0; border:1px solid transparent; border-radius:6px; background:transparent; font-size:14px; line-height:1; cursor:pointer; filter:saturate(.72); opacity:.72; }
.game-card-language-button:hover,.game-card-language-button:focus-visible { background:rgba(255,255,255,.08); opacity:1; outline:none; }
.game-card-language-button.active { border-color:rgba(156,124,255,.6); background:rgba(156,124,255,.2); opacity:1; filter:none; }
.game-card-language-button.disabled { opacity:.28; filter:grayscale(1); cursor:not-allowed; }
.game-card-language-button.disabled:hover { background:transparent; }
/* Names must remain fully readable; stack entries may wrap instead of ellipsizing. */
.game-marker-stack-card b,.game-marker-stack-card small { overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }

/* v0.10.5: The persistent room-session "Kurz weg" control is an icon-only
   action. Keep its pause glyph white like the in-room/game AFK controls instead
   of inheriting the amber warning text color. */
#room-session-control [data-room-session-away].warning { color: #fff; }

/* v0.10.5: the actually rendered own-board Game View / embedded board HUD uses
   .game-hud-afk-toggle, not the persistent room-session control above. Keep the
   pause/play glyph fully white in both contexts. */
.game-hud-afk-toggle,
body.game-view-active .game-hud-afk-toggle { color:#fff; opacity:1; }
.game-hud-afk-toggle:hover,
body.game-view-active .game-hud-afk-toggle:hover { color:#fff; }

/* v0.10.8: historical print variants + global card catalogue / stable preview browser. */
.game-card-lightbox-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:72px; padding:9px 12px;
  border-top:1px solid var(--border); background:#0e1217;
}
.game-card-lightbox-browser-row { display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; }
.game-card-lightbox-variant-browser { display:flex; align-items:center; gap:6px; min-width:min(520px,52vw); flex:1 1 520px; }
.game-card-lightbox-variant { min-width:0; display:flex; align-items:center; gap:9px; color:var(--muted); font-size:10px; font-weight:750; flex:1 1 auto; }
.game-card-lightbox-variant > span { flex:0 0 auto; text-transform:uppercase; letter-spacing:.08em; }
.game-card-lightbox-variant select {
  width:100%; min-width:0; height:36px; padding:0 34px 0 10px;
  border:1px solid var(--border); border-radius:9px; background:#151a20; color:var(--text);
}
.game-card-lightbox-variant-loading,.game-card-lightbox-preview-only { color:var(--faint); font-size:10px; }
.game-card-lightbox-languages { display:flex; align-items:center; gap:7px; flex:0 0 auto; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.game-card-lightbox-language-buttons { display:flex; align-items:center; gap:4px; max-width:280px; overflow:auto; padding:2px; }
.game-card-lightbox-language-buttons button { min-width:30px; height:28px; padding:0 6px; border:1px solid var(--border); border-radius:7px; background:#11151b; color:var(--muted); font:inherit; cursor:pointer; }
.game-card-lightbox-language-buttons button:hover { border-color:rgba(255,255,255,.28); color:var(--text); }
.game-card-lightbox-language-buttons button.active { border-color:rgba(156,124,255,.72); background:rgba(156,124,255,.15); color:#fff; }
.game-card-lightbox-toolbar-end { display:flex; align-items:center; gap:8px; flex:0 0 auto; min-width:0; }
.game-card-lightbox-apply { min-width:104px; }
.game-card-lightbox-card-switch { display:flex; align-items:center; gap:6px; overflow:auto; margin-left:auto; }
.game-card-lightbox-card-switch button {
  display:flex; align-items:center; gap:6px; flex:0 0 auto; min-width:46px; height:38px; padding:4px 7px;
  border:1px solid var(--border); border-radius:9px; background:#11151b; color:var(--text); cursor:pointer;
}
.game-card-lightbox-card-switch button.active { border-color:rgba(156,124,255,.72); background:rgba(156,124,255,.13); }
.game-card-lightbox-card-switch img { width:23px; max-height:31px; object-fit:cover; border-radius:3px; }
.game-card-lightbox-card-switch span { font-size:10px; font-weight:800; white-space:nowrap; }

.game-marker-editor-card-preview {
  position:relative; display:grid; place-items:center; width:42px; min-width:42px; height:58px; padding:0;
  overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:6px; background:#0c1014; color:var(--text); cursor:pointer;
}
.game-marker-editor-card-preview img { width:100%; height:100%; object-fit:cover; }
.game-marker-editor-card-preview > span:not(.game-marker-editor-card-placeholder) {
  position:absolute; right:3px; bottom:3px; display:grid; place-items:center; width:19px; height:19px;
  border:1px solid rgba(255,255,255,.24); border-radius:5px; background:rgba(0,0,0,.72); opacity:.78;
}
.game-marker-editor-card-preview > span .ui-icon { width:11px; height:11px; }
.game-marker-editor-card-preview:hover,.game-marker-editor-card-preview:focus-visible { border-color:rgba(156,124,255,.7); outline:none; }

.card-catalog-page { display:grid; gap:16px; }
.card-catalog-title { align-items:flex-start; }
.card-catalog-title h2 { margin:3px 0 0; font-size:24px; }
.card-catalog-title p { max-width:760px; }
.card-catalog-search-card { display:grid; gap:12px; padding:14px; }
.card-catalog-searchbar { display:grid; grid-template-columns:minmax(260px,1fr) minmax(170px,230px) auto; gap:10px; align-items:end; }
.card-catalog-searchbar label,.card-catalog-filter-grid > label,.card-catalog-variant { display:grid; gap:6px; min-width:0; color:var(--muted); font-size:11px; font-weight:700; }
.card-catalog-query-box { display:flex; align-items:center; gap:8px; min-height:42px; padding:0 11px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); }
.card-catalog-query-box:focus-within { border-color:rgba(156,124,255,.64); box-shadow:0 0 0 3px rgba(156,124,255,.08); }
.card-catalog-query-box .ui-icon { width:17px; height:17px; color:var(--faint); }
.card-catalog-query-box input { min-width:0; width:100%; border:0; background:transparent; padding:0; box-shadow:none; }
.card-catalog-query-box input:focus { outline:0; box-shadow:none; }
.card-catalog-searchbar select { min-height:42px; }
.card-catalog-filters { border-top:1px solid var(--border-soft); padding-top:10px; }
.card-catalog-filters summary { display:flex; align-items:center; gap:7px; width:max-content; max-width:100%; color:var(--text); font-size:12px; font-weight:800; cursor:pointer; list-style:none; }
.card-catalog-filters summary::-webkit-details-marker { display:none; }
.card-catalog-filters summary .ui-icon { width:14px; height:14px; }
.card-catalog-filters summary span { color:var(--faint); font-weight:600; }
.card-catalog-filter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding-top:12px; }
.card-catalog-colors { margin:0; padding:8px 10px; border:1px solid var(--border-soft); border-radius:9px; display:flex; align-items:center; gap:6px; }
.card-catalog-colors legend { padding:0 5px; color:var(--muted); font-size:10px; }
.card-catalog-colors label { display:flex; align-items:center; justify-content:center; gap:4px; min-width:32px; height:29px; padding:0 6px; border:1px solid var(--border-soft); border-radius:7px; background:#101419; cursor:pointer; font-size:10px; font-weight:800; }
.card-catalog-colors input { width:auto; }
.card-catalog-paper { align-self:end; min-height:40px; padding:0 4px; }
.card-catalog-status { min-height:20px; color:var(--muted); font-size:11px; }
.card-catalog-layout { display:grid; grid-template-columns:minmax(300px,430px) minmax(0,1fr); gap:16px; align-items:start; }
.card-catalog-results { padding:9px; min-height:420px; max-height:calc(100vh - 245px); overflow:auto; position:sticky; top:16px; }
.card-catalog-result-list { display:grid; gap:5px; }
.card-catalog-result { width:100%; display:grid; grid-template-columns:48px minmax(0,1fr); gap:10px; align-items:center; padding:7px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.card-catalog-result:hover,.card-catalog-result:focus-visible { background:rgba(255,255,255,.035); border-color:var(--border-soft); outline:none; }
.card-catalog-result.active { background:rgba(156,124,255,.11); border-color:rgba(156,124,255,.44); }
.card-catalog-result img,.card-catalog-result-placeholder { width:48px; height:67px; object-fit:cover; border-radius:5px; background:#090c10; display:grid; place-items:center; }
.card-catalog-result > span:last-child { min-width:0; display:grid; gap:2px; }
.card-catalog-result b,.card-catalog-result small { white-space:normal; overflow-wrap:anywhere; }
.card-catalog-result b { font-size:12px; }
.card-catalog-result small { color:var(--faint); font-size:9px; line-height:1.3; }
.card-catalog-detail { min-height:540px; padding:16px; }
.card-catalog-detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.card-catalog-detail-head h2 { margin:3px 0 1px; font-size:23px; }
.card-catalog-detail-head small { display:block; color:var(--muted); }
.card-catalog-detail-grid { display:grid; grid-template-columns:minmax(230px,360px) minmax(260px,1fr); gap:22px; align-items:start; }
.card-catalog-image-button { display:grid; place-items:center; padding:0; border:0; border-radius:15px; background:#07090c; cursor:zoom-in; overflow:hidden; box-shadow:0 18px 45px rgba(0,0,0,.32); }
.card-catalog-image-button img { width:100%; height:auto; display:block; }
.card-catalog-image-button > span { padding:80px 20px; color:var(--muted); }
.card-catalog-card-data { min-width:0; display:grid; gap:13px; align-content:start; }
.card-catalog-card-data > strong { font-size:13px; }
.card-catalog-card-data > p { margin:0; white-space:pre-line; color:#d9dce3; line-height:1.5; font-size:12px; }
.card-catalog-variant { padding:13px; border:1px solid var(--border-soft); border-radius:11px; background:var(--panel-2); }
.card-catalog-variant select { width:100%; }
.card-catalog-variant small,.card-catalog-single-variant { color:var(--faint); font-size:10px; }
.card-catalog-single-variant { padding:11px 12px; border:1px dashed var(--border-soft); border-radius:9px; }
.card-catalog-diagnostics { margin-top:4px; border-top:1px solid var(--border-soft); padding-top:10px; }
.card-catalog-diagnostics summary { cursor:pointer; color:#d9d0ff; font-size:11px; font-weight:800; }
.card-catalog-diagnostics dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; margin:10px 0 0; }
.card-catalog-diagnostics dl > div { min-width:0; padding:7px 8px; border:1px solid var(--border-soft); border-radius:8px; background:#0d1116; }
.card-catalog-diagnostics dt { color:var(--faint); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.card-catalog-diagnostics dd { margin:3px 0 0; overflow-wrap:anywhere; font-size:10px; }

@media (max-width:980px) {
  .card-catalog-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card-catalog-layout { grid-template-columns:1fr; }
  .card-catalog-results { position:static; max-height:420px; min-height:0; }
}
@media (max-width:680px) {
  .game-card-lightbox-toolbar { align-items:stretch; flex-direction:column; }
  .game-card-lightbox-browser-row { align-items:stretch; flex-direction:column; }
  .game-card-lightbox-variant-browser { min-width:0; width:100%; flex-basis:auto; }
  .game-card-lightbox-variant { min-width:0; width:100%; align-items:flex-start; flex-direction:column; }
  .game-card-lightbox-languages { align-items:flex-start; flex-direction:column; }
  .game-card-lightbox-language-buttons { max-width:100%; width:100%; }
  .game-card-lightbox-toolbar-end { width:100%; }
  .game-card-lightbox-card-switch { width:100%; margin-left:0; }
  .card-catalog-searchbar,.card-catalog-filter-grid,.card-catalog-detail-grid { grid-template-columns:1fr; }
  .card-catalog-diagnostics dl { grid-template-columns:1fr; }
}

/* v0.10.10: stable card-lightbox geometry, image overlays and catalogue workspace polish. */
.game-card-lightbox-head-actions { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.game-card-lightbox-title-block { min-width:0; }
.game-card-lightbox.is-maximized {
  width:calc(100vw - 16px);
  height:calc(100vh - 16px);
  max-width:none;
  max-height:none;
  transform:none;
}
.game-card-lightbox-body { position:relative; }
.game-card-lightbox-image {
  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.game-card-lightbox-language-overlay,
.game-card-lightbox-stack-overlay {
  position:absolute;
  top:12px;
  z-index:3;
  max-width:min(48%,520px);
  padding:6px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:10px;
  background:rgba(7,9,12,.84);
  box-shadow:0 8px 28px rgba(0,0,0,.34);
  backdrop-filter:blur(8px);
}
.game-card-lightbox-language-overlay { left:12px; display:grid; gap:5px; }
.game-card-lightbox-language-overlay small { color:#d0d5dc; font-size:9px; line-height:1.25; }
.game-card-lightbox-stack-overlay { right:12px; overflow:hidden; }
.game-card-lightbox-stack-overlay .game-card-lightbox-card-switch {
  max-width:100%;
  margin-left:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}
.game-card-lightbox-language-buttons { max-width:min(420px,42vw); }
.game-card-lightbox-toolbar {
  min-height:66px;
  grid-template-columns:minmax(0,1fr) auto;
}
.game-card-lightbox-browser-row { flex:1 1 auto; overflow:hidden; }
.game-card-lightbox-variant-browser {
  flex:0 1 auto;
  min-width:0;
  width:min(620px,62vw);
}
.game-card-lightbox-variant { flex:0 0 auto; min-width:0; }
.game-card-lightbox-variant select {
  width:440px;
  min-width:440px;
  max-width:440px;
}
.game-card-lightbox-variant-position {
  min-width:54px;
  color:var(--faint);
  font-size:10px;
  font-weight:800;
  text-align:center;
  white-space:nowrap;
}
.game-card-lightbox-single-variant { color:var(--faint); font-size:10px; white-space:nowrap; }
.game-card-lightbox-apply:disabled { cursor:default; }
.game-card-lightbox-apply.is-applied:disabled { opacity:.92; color:var(--text); border-color:rgba(255,255,255,.18); }
.game-card-lightbox-apply-feedback { display:inline-flex; align-items:center; gap:5px; max-width:280px; color:#cfd5dc; font-size:10px; line-height:1.25; }
.game-card-lightbox-apply-feedback .ui-icon { width:14px; height:14px; flex:0 0 auto; }

@media (max-width:760px) {
  .game-card-lightbox-language-overlay,
  .game-card-lightbox-stack-overlay { top:8px; max-width:calc(50% - 12px); padding:4px; }
  .game-card-lightbox-language-overlay { left:8px; }
  .game-card-lightbox-stack-overlay { right:8px; }
  .game-card-lightbox-variant-browser { width:100%; }
  .game-card-lightbox-variant select { width:min(100%,440px); min-width:0; max-width:100%; }
}

.card-catalog-searchbar { grid-template-columns:minmax(280px,1fr) auto; }
.card-catalog-query-box { position:relative; }
.card-catalog-query-box input { padding-right:34px; }
.card-catalog-query-clear {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:28px;
  height:28px;
  margin-left:auto;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
.card-catalog-query-clear[hidden] { display:none; }
.card-catalog-query-clear:hover,.card-catalog-query-clear:focus-visible { background:rgba(255,255,255,.07); color:#fff; outline:none; }
.card-catalog-query-clear .ui-icon { width:15px; height:15px; color:currentColor; }
.card-catalog-layout {
  align-items:stretch;
  height:var(--card-catalog-workspace-height,calc(100dvh - 300px));
  min-height:420px;
}
.card-catalog-results,
.card-catalog-detail {
  position:static;
  top:auto;
  height:100%;
  min-height:0;
  max-height:none;
  overflow:auto;
}
.card-catalog-empty-state { min-height:100%; display:grid; place-items:center; align-content:center; }

@media (max-width:900px) {
  .card-catalog-layout { height:auto; min-height:0; }
  .card-catalog-results { height:auto; max-height:420px; }
  .card-catalog-detail { height:auto; min-height:420px; }
}

/* v0.10.11: resizable card-artwork window with a true image stage. */
.game-card-lightbox-backdrop { padding:8px; }
.game-card-lightbox {
  position:relative;
  min-width:620px;
  min-height:520px;
  max-width:calc(100vw - 16px);
  max-height:calc(100vh - 16px);
}
.game-card-lightbox.is-maximized {
  width:calc(100vw - 16px) !important;
  height:calc(100vh - 16px) !important;
  max-width:none;
  max-height:none;
  transform:none !important;
}
.game-card-lightbox-body {
  min-width:0;
  min-height:0;
  padding:0;
  overflow:hidden;
  position:relative;
}
.game-card-lightbox-image-stage {
  position:absolute;
  inset:14px;
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.game-card-lightbox-image-stage .game-marker-empty { max-width:min(420px,80%); }
.game-card-lightbox-image {
  display:block;
  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.55));
}
.game-card-lightbox-resize-handle {
  position:absolute;
  z-index:8;
  display:block;
  touch-action:none;
  user-select:none;
}
.game-card-lightbox-resize-handle.is-n,
.game-card-lightbox-resize-handle.is-s { left:12px; right:12px; height:8px; }
.game-card-lightbox-resize-handle.is-n { top:-4px; cursor:ns-resize; }
.game-card-lightbox-resize-handle.is-s { bottom:-4px; cursor:ns-resize; }
.game-card-lightbox-resize-handle.is-e,
.game-card-lightbox-resize-handle.is-w { top:12px; bottom:12px; width:8px; }
.game-card-lightbox-resize-handle.is-e { right:-4px; cursor:ew-resize; }
.game-card-lightbox-resize-handle.is-w { left:-4px; cursor:ew-resize; }
.game-card-lightbox-resize-handle.is-ne,
.game-card-lightbox-resize-handle.is-nw,
.game-card-lightbox-resize-handle.is-se,
.game-card-lightbox-resize-handle.is-sw { width:14px; height:14px; }
.game-card-lightbox-resize-handle.is-ne { top:-5px; right:-5px; cursor:nesw-resize; }
.game-card-lightbox-resize-handle.is-nw { top:-5px; left:-5px; cursor:nwse-resize; }
.game-card-lightbox-resize-handle.is-se { right:-5px; bottom:-5px; cursor:nwse-resize; }
.game-card-lightbox-resize-handle.is-sw { left:-5px; bottom:-5px; cursor:nesw-resize; }
.game-card-lightbox.is-maximized .game-card-lightbox-resize-handle { display:none; }
.game-card-lightbox.is-resizing,
.game-card-lightbox.is-resizing * { user-select:none !important; }

@media (max-width:680px), (max-height:560px) {
  .game-card-lightbox {
    min-width:calc(100vw - 16px);
    min-height:calc(100vh - 16px);
  }
  .game-card-lightbox-resize-handle { display:none; }
}


/* v0.10.12: height-led artwork sizing + readable card rules text/symbols. */
.game-marker-card-copy > strong { font-size:17px; line-height:1.25; }
.game-marker-type { font-size:14px; line-height:1.4; }
.game-marker-card-stats { font-size:12px; }
.game-marker-oracle {
  margin-top:6px;
  max-height:none;
  overflow:visible;
  color:#e0e3e9;
  font-size:15px;
  line-height:1.48;
  white-space:pre-line;
}
.game-board-marker-popover { overscroll-behavior:contain; }
.game-card-mana img { width:20px; height:20px; }
.game-keyword-chip { font-size:12px; }
.scryfall-inline-symbol {
  display:inline-block;
  width:1.12em;
  height:1.12em;
  margin:0 .06em;
  vertical-align:-.18em;
  object-fit:contain;
}
.card-catalog-card-data > strong { font-size:15px; line-height:1.4; }
.card-catalog-card-data > p { font-size:15px; line-height:1.55; }


/* v0.10.13: browser-verified height-led artwork geometry.
   The image stage is absolutely inset, so percentage height on the replaced <img>
   is not a reliable definite containing-block height in Chromium. Keep the image
   intrinsic-sized, absolutely center it, and cap it by both stage dimensions. */
.game-card-lightbox-image-stage > .game-card-lightbox-image {
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  margin:auto;
  object-fit:contain;
  object-position:center center;
}