:root{--t:rgba(255,255,255,.92);--m:rgba(255,255,255,.65);--r14:14px;--r18:18px}*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;background:radial-gradient(circle at 12% 10%, rgba(14,165,233,.45) 0, transparent 44%), radial-gradient(circle at 92% 88%, rgba(45,212,191,.35) 0, transparent 46%), radial-gradient(circle at 50% 50%, #060a18 0, #060a18 60%);color:var(--t);touch-action:manipulation}
input,select,textarea{font-size:16px!important}
.app{position:fixed;inset:0;height:var(--appH,100dvh);display:flex;flex-direction:column;gap:6px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));overflow:hidden}
.topbar{padding:calc(10px + env(safe-area-inset-top)) 10px 6px;display:flex;align-items:center;justify-content:space-between;gap:10px;backdrop-filter:blur(14px);flex:0 0 auto}
.brand{display:flex;align-items:center;gap:10px;min-width:0}

.loginByline{
  position:fixed;
  top:calc(8px + env(safe-area-inset-top));
  right:12px;          /* small right margin */
  left:auto;
  z-index:15000;
  font-size:11px;
  color:rgba(255,255,255,.45);
  pointer-events:none;
  user-select:none;
  display:none;
}

/* Centered content under tabs */
.tabShell { width: 100%; }
.tab-content { width: 100%; max-width: 720px; margin: 0 auto; padding: 16px; box-sizing: border-box; }


/* ===== Status dot (fixed circle on all DPIs) ===== */
.statusDot{
  width:9px;height:9px;min-width:9px;min-height:9px;aspect-ratio:1/1;
  border-radius:50%;
  display:inline-block;flex:0 0 auto;
  background:rgba(239,68,68,.95);box-shadow:0 0 10px rgba(239,68,68,.35)
}
.statusDot.online{background:rgba(34,197,94,.95);box-shadow:0 0 10px rgba(34,197,94,.35)}
.statusDot.connecting{background:rgba(249,115,22,.95);box-shadow:0 0 10px rgba(249,115,22,.35)}

.roomPill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);font-size:12px;cursor:pointer;user-select:none;max-width:min(720px,72vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roomPill .hint{color:var(--m)}
.actions{display:flex;align-items:center;gap:10px}
.iconBtn{width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.05);color:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;cursor:pointer}
.iconBtn svg{width:22px;height:22px;opacity:.92}
.iconBtn.active{background:rgba(79,70,229,.22);box-shadow:0 0 0 1px rgba(79,70,229,.22) inset}
/* Primary is the default look (not "always blue") */
.iconBtn.primary{background:rgba(255,255,255,.05);box-shadow:none}
.iconBtn.primary svg{opacity:.92}

/* Only blue when active (sharing on) */
.iconBtn.primary.active{background:linear-gradient(180deg,rgba(79,70,229,.92),rgba(79,70,229,.72));box-shadow:0 10px 30px rgba(79,70,229,.10)}
.iconBtn.primary.active svg{opacity:1}

.main{flex:1;min-height:0;display:grid;grid-template-columns:1.7fr 1fr;gap:6px;padding:0 10px 10px;overflow:hidden}
@media (max-width:980px){.main{display:flex;flex-direction:column;gap:6px;padding:0 10px 10px;overflow:hidden;padding-bottom:calc(72px + env(safe-area-inset-bottom) + var(--kbd,0px))}.videoCard{flex:1 1 auto;min-height:0}}
.card{background:rgba(255,255,255,.04);border-radius:var(--r18);padding:8px;min-height:0;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.stage{border-radius:var(--r14);background:rgba(0,0,0,.18);overflow:hidden;padding:6px;display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;--thumbCols:4}
.presentBar{display:none;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;background:rgba(0,0,0,.24);backdrop-filter:blur(14px);flex:0 0 auto;max-width:100%;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.presentBar.show{display:flex}
.presentBar .pBtn{width:38px;height:38px;border-radius:999px;border:0;background:rgba(255,255,255,.08);color:rgba(255,255,255,.92);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.presentBar .pBtn:hover{background:rgba(255,255,255,.11)}
.presentBar .pBtn svg{width:18px;height:18px;opacity:.95}
.presentBar input[type=range]{width:100%;flex:1 1 auto;accent-color:rgba(79,70,229,.95)}
.presentBar .pCount{font-size:12px;color:rgba(255,255,255,.75);white-space:nowrap;flex:0 0 auto}
.tilesWrap{flex:1;min-height:0;width:100%;display:grid;gap:6px;align-items:stretch;justify-items:stretch}
.stage[data-mode=focus] .tilesWrap{grid-auto-flow:row;grid-template-columns:repeat(var(--thumbCols,4),minmax(0,1fr));grid-template-rows:minmax(0,1fr);grid-auto-rows:clamp(84px,18vh,140px);align-content:start}
.stage[data-mode=focus] .tile.is-main{grid-column:1/-1;grid-row:1}
.tile{position:relative;border-radius:var(--r14);overflow:hidden;background:rgba(0,0,0,.28);min-height:0;display:flex;align-items:center;justify-content:center;transform:translateZ(0);backface-visibility:hidden}
.tile.hidden{display:none!important}
.tile video{width:100%;height:100%;object-fit:contain;background:rgba(0,0,0,.25);transform:translateZ(0);backface-visibility:hidden;pointer-events:none}
.tile .label{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.30);font-size:11px;backdrop-filter:blur(10px);max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;z-index:4}
.tile.is-local{outline:1px solid rgba(255,255,255,.22);outline-offset:-1px}
.tile.is-presenting{outline:2px solid rgba(255,255,255,.30);outline-offset:-2px}
.miniBtn{position:absolute;top:8px;width:32px;height:32px;border-radius:999px;border:0;background:rgba(0,0,0,.35);color:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-tap-highlight-color:transparent;z-index:6}
.miniBtn svg{width:18px;height:18px;opacity:.92}
.fsBtn{right:8px;display:none}
.stage[data-mode=focus] .tile.is-main .fsBtn{display:flex}
/* Camera button hidden by default */
.camBtn{left:8px;display:none}
/* Show ONLY when local tile is the focused (main) tile */
.stage[data-mode=focus] .tile.is-main.is-local .camBtn{display:flex}
.composer{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.composer input{flex:1;min-width:0;border-radius:999px;border:0;background:rgba(255,255,255,.04);color:var(--t);padding:12px 12px;font-size:16px;outline:none}
.sendBtn{width:46px;height:46px;border-radius:999px;border:0;background:linear-gradient(180deg,rgba(79,70,229,.90),rgba(79,70,229,.75));color:#fff;cursor:pointer;font-size:18px}
.attachBtn{width:46px;height:46px;border-radius:999px;border:0;background:rgba(255,255,255,.05);color:rgba(255,255,255,.90);cursor:pointer;font-size:18px}
.chatbox{flex:1;min-height:0;border-radius:var(--r14);background:rgba(0,0,0,.14);padding:10px;overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.msg{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.meta{font-size:11px;color:var(--m)}
.bubble{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.05);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bubble.me{background:rgba(79,70,229,.18);align-self:flex-end}
.bubble a{color:rgba(255,255,255,.92);text-decoration:underline;text-underline-offset:2px}
.chatPreview{display:none;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.22);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.grabber{width:42px;height:4px;border-radius:999px;background:rgba(255,255,255,.22)}
.chatHandleRow{display:flex;align-items:center;gap:8px;margin-left:10px;min-width:0}
.chatHandleRow .title{font-size:12px;color:rgba(255,255,255,.85);font-weight:650;white-space:nowrap}
.badge{min-width:18px;height:18px;border-radius:999px;background:rgba(239,68,68,.90);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
@media (max-width:980px){.chatCard{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom) + var(--kbd,0px));z-index:5000;padding:8px;border-radius:22px;background:rgba(18,22,35,.92);backdrop-filter:blur(14px);overflow:hidden;transition:height .22s ease}
.chatCard.collapsed{height:54px}
.chatCard.expanded{top:calc(64px + env(safe-area-inset-top));height:auto}
.chatPreview{display:flex}
.chatCard.collapsed .composer,.chatCard.collapsed .chatbox{display:none}
.chatCard.expanded{display:flex;flex-direction:column;gap:8px}
.chatCard.expanded .composer{display:flex}
.chatCard.expanded .chatbox{display:block;flex:1;min-height:0}}
/* ===== Upload status (chat) ===== */
.uploadRow{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
  max-width:min(520px, 86vw);
}

.uploadTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.uploadName{
  font-size:12px;
  color:rgba(255,255,255,.86);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:72%;
}

.uploadPct{
  font-size:12px;
  color:rgba(255,255,255,.60);
  white-space:nowrap;
}

.uploadBar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:rgba(0,0,0,.22);
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}

.uploadFill{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(79,70,229,.95), rgba(79,70,229,.70));
  box-shadow:0 10px 20px rgba(79,70,229,.12);
  transition:width .10s linear;
}

.uploadNote{
  font-size:11px;
  color:rgba(255,255,255,.55);
}
.uploadNote.err{ color:rgba(239,68,68,.90); }
.uploadNote.ok{ color:rgba(34,197,94,.85); }
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:9999;backdrop-filter:blur(14px)}
.modal.open{display:flex}
.sheet{width:min(420px,96vw);background:rgba(18,22,35,.92);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:10px}
/* ===== Join modal branding (minimal) ===== */
.joinBrand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.joinBrand .logo{
  width:44px;
  height:44px;
  border-radius:14px;
  object-fit:cover;
  background:rgba(255,255,255,.06);
  box-shadow:0 8px 18px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
  flex:0 0 auto;
}
.joinBrand .txt{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.joinBrand .roomTitle{
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,.92);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.joinBrand .byline{
  font-size:11px;
  color:rgba(255,255,255,.50);
  line-height:1.1;
}

.joinHeader{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  position:relative;
}

.bylineTop{
  position:absolute;
  top:-2px;
  left:0;
  font-size:11px;
  color:rgba(255,255,255,.45);
}

.joinLogo{
  width:64px;
  height:64px;
  border-radius:18px;
  object-fit:cover;
  background:rgba(255,255,255,.06);
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.joinRoomTitle{
  font-size:16px;
  font-weight:700;
  color:rgba(255,255,255,.95);
  text-align:center;
  line-height:1.2;
}

.input,.select{width:100%;border-radius:14px;border:0;background:rgba(255,255,255,.06);color:var(--t);padding:12px 12px;font-size:16px;outline:none}
.primaryBtn{border-radius:999px;border:0;background:linear-gradient(180deg,rgba(79,70,229,.95),rgba(79,70,229,.82));color:#fff;padding:12px 14px;font-size:15px;cursor:pointer}
.secondaryBtn{border-radius:999px;border:0;background:rgba(255,255,255,.06);color:rgba(255,255,255,.92);padding:12px 14px;font-size:15px;cursor:pointer}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:420px){.row2{grid-template-columns:1fr}}
.toast{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom) + var(--kbd,0px));transform:translateX(-50%);background:rgba(0,0,0,.55);color:rgba(255,255,255,.92);padding:10px 14px;border-radius:999px;font-size:13px;backdrop-filter:blur(12px);display:none;z-index:10000;max-width:min(92vw,560px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast.show{display:block}

/* Game window */
.gameWindow{position:fixed;left:12px;right:12px;top:calc(64px + env(safe-area-inset-top));bottom:calc(12px + env(safe-area-inset-bottom));z-index:8000;display:none;flex-direction:column;gap:10px;
  background:rgba(18,22,35,.92);border-radius:22px;padding:12px;backdrop-filter:blur(16px);box-shadow:0 20px 60px rgba(0,0,0,.40);border:1px solid rgba(255,255,255,.06)}
.gameWindow.show{display:flex}
@media (min-width:981px){
  .gameWindow{left:24px;right:auto;top:calc(84px + env(safe-area-inset-top));bottom:auto;width:min(860px,66vw);height:min(640px,72vh);resize:both;overflow:auto}
}
.gameHeader{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gameTitle{font-size:13px;font-weight:700;color:rgba(255,255,255,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gameMeta{font-size:12px;color:rgba(255,255,255,.60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gameContent{flex:1;min-height:0;border-radius:16px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06);overflow:auto;padding:12px}
.playerList{display:flex;flex-direction:column;gap:8px;max-height:min(44vh,360px);overflow:auto;padding:4px 2px}
.playerRow{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}
.playerRow input{width:18px;height:18px;accent-color:rgba(79,70,229,.95)}
.playerRow .pName{font-size:13px;color:rgba(255,255,255,.92);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playerRow .pTag{font-size:11px;color:rgba(255,255,255,.60);padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.05)}
.small{color:rgba(255,255,255,.70);font-size:12px;line-height:1.35}

/* ===== Mobile landscape improvements ===== */
@media (max-width:980px) and (orientation:landscape){

  /* Focus mode: if many tiles, make main span 2 rows and show thumbs in 2-row grid on the right */
  .stage[data-mode=focus][data-lfocus="many"] .tilesWrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:1fr 1fr;
    gap:6px;
    align-items:stretch;
    justify-items:stretch;
  }
  .stage[data-mode=focus][data-lfocus="many"] .tile.is-main{
    grid-column:1;
    grid-row:1 / span 2 !important;
  }
  .stage[data-mode=focus][data-lfocus="many"] .tile:not(.is-main){
    grid-column:2;
  }
}

/* ===== Mobile landscape: compact chat button, left aligned ===== */
@media (max-width:980px) and (orientation:landscape){

  /* Shrink the collapsed chat button */
  .chatCard.collapsed{
    height:42px;
    left:10px;
    right:auto;
    width:auto;
    padding:6px 10px;
    border-radius:999px;
  }

  /* Make preview row compact */
  .chatPreview{
    padding:4px 8px;
  }

  .chatHandleRow{
    margin-left:0;
    gap:6px;
  }

  .chatHandleRow .title{
    font-size:11px;
  }

  .grabber{
    display:none; /* not needed in landscape */
  }

  /* Ensure it never overlaps video tiles */
  .videoCard{
    margin-bottom:0px;
  }
}


/* --- Chat: composer always bottom + safer with mobile keyboard --- */
.chatbox{
  background:rgba(0,0,0,.10); /* mehr transparent als vorher (.14) */
}

@media (max-width:980px){
  /* In expanded: make column layout + keep input row pinned to bottom */
  .chatCard.expanded{
    display:flex;
    flex-direction:column;
  }
  .chatCard.expanded .chatbox{
    order:1;
    flex:1 1 auto;
    min-height:0;
    padding-bottom:12px;
  }
  .chatCard.expanded .composer{
    order:2;
    position:sticky;
    bottom:0;
    background:rgba(18,22,35,.78);
    backdrop-filter:blur(14px);
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }
}
/* Stronger override: chat card + message area more transparent */
.chatCard{
  background:rgba(18,22,35,.78) !important;
}
.chatbox{
  background:rgba(0,0,0,.08) !important;
}
@media (max-width:980px){
  .chatCard.expanded .composer{ margin-top:auto; }
}

/* ===== Bigger chat handle (mobile-friendly) ===== */
@media (max-width:980px){
  .chatCard.collapsed{ height:64px; } /* was 54px */
  .chatPreview{ padding:10px 12px; }  /* was 6px 10px */
  .chatHandleRow .title{ font-size:13px; } /* was 12px */
  .badge{ min-width:22px; height:22px; font-size:12px; } /* was 18px */
}

/* Mobile landscape: also slightly bigger than current */
@media (max-width:980px) and (orientation:landscape){
  .chatCard.collapsed{
    height:48px; /* was 42px */
    padding:8px 12px;
  }
  .chatHandleRow .title{ font-size:12px; }
}

/* ===== Bigger LEAVE button (topbar logout) ===== */
#logoutBtn{
  width:56px !important;   /* was 44px via .iconBtn */
  height:56px !important;
}

#logoutBtn svg{
  width:28px !important;   /* was 22px via .iconBtn svg */
  height:28px !important;
  opacity:1 !important;
}

/* ===== Nicer Leave button (subtle 3D) ===== */
#logoutBtn{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 0 0 1px rgba(255,255,255,.06) inset !important;
  transform:translateY(0);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

#logoutBtn:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05)) !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.32),
    0 1px 0 rgba(255,255,255,.12) inset,
    0 0 0 1px rgba(255,255,255,.07) inset !important;
}

#logoutBtn:active{
  transform:translateY(1px);
  box-shadow:
    0 8px 16px rgba(0,0,0,.26),
    0 1px 0 rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(255,255,255,.06) inset !important;
}


/* Optional: slightly larger hit-area on very small screens */
@media (max-width:420px){
  #logoutBtn{
    width:60px !important;
    height:60px !important;
  }
  #logoutBtn svg{
    width:30px !important;
    height:30px !important;
  }
}

/* ===== Landscape: maximize video area, allow topbar overlap, avoid focus cut ===== */
@media (max-width:980px) and (orientation:landscape){

  /* Let topbar float over content (video may be behind it) */
  .topbar{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    z-index:6000 !important;

    /* minimal spacing + clean look */
    padding:calc(6px + env(safe-area-inset-top)) 8px 4px !important;
    /*background:rgba(6,10,24,.35) !important;
    backdrop-filter:blur(14px) !important;*/
  }

  .topbar{
   /* solid but light overlay – no video distortion */
   background:
    linear-gradient(
      to bottom,
      rgba(6,10,24,.75),
      rgba(6,10,24,.35) 70%,
      rgba(6,10,24,0)
    ) !important;

   backdrop-filter:none !important;
  }
  .topbar{
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset !important;
  }

  /* Remove extra vertical gaps so stage can use full height */
  .app{
    gap:0 !important;
  }

  .main{
    /* start at the very top, behind the topbar */
    padding:0 8px 8px !important;
    padding-bottom:calc(8px + env(safe-area-inset-bottom) + var(--kbd,0px)) !important;
  }

  .videoCard{
    padding:6px !important;
    margin:0 !important;
    flex:1 1 auto !important;
    min-height:0 !important;
  }

  .stage{
    padding:4px !important; /* slightly tighter than 6px */
    min-height:0 !important;
  }

  .tilesWrap{
    height:100% !important;
    min-height:0 !important;
    align-items:stretch !important;
  }

  /* Focus mode: ensure full visibility (no "cut") */
	.stage[data-mode=focus]:not([data-lfocus="many"]) .tilesWrap{
	  grid-template-columns:minmax(0,1fr) minmax(0,30%) !important;
	  grid-template-rows:1fr !important;
	  grid-auto-rows:minmax(0,1fr) !important;
	  gap:6px !important;
	  align-items:stretch !important;
	  justify-items:stretch !important;
	}

	.stage[data-mode=focus]:not([data-lfocus="many"]) .tile.is-main{
	  grid-column:1 !important;
	  grid-row:1 !important;
	}

	.stage[data-mode=focus]:not([data-lfocus="many"]) .tile:not(.is-main){
	  grid-column:2 !important;
	}

  /* Hard guarantee: never crop video in landscape */
  .tile video{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }
}

@media (max-width:980px) and (orientation:landscape){

  /* Move presentation controls below the floating topbar */
  .presentBar.show{
    margin-top: var(--topbarSafe);
  }

}

/* ===== Landscape: let taps pass through topbar except its buttons ===== */
@media (max-width:980px) and (orientation:landscape){
  .topbar{
    pointer-events:none !important; /* allow clicks on video UI beneath */
  }
  .topbar .iconBtn,
  .topbar button,
  .topbar a,
  .topbar input,
  .topbar select{
    pointer-events:auto !important; /* keep topbar controls clickable */
  }

  /* Push the per-tile overlay buttons down so they never sit under topbar */
  .tile .miniBtn{
    top:calc(8px + var(--topbarSafe)) !important; /* was top:8px */
  }
}