:root{
  color-scheme:dark;
  --primary:#cfcfcf;
  --primary-hover:#a5a5a5;
  --primary-visited:#a1a1a1;
  --bg:#0B0B0B; --panel:#151515; --panel-dark:#101010; --line:#2a2a2a; --muted:#9a9a9a; --text:#eaeaea;
  --btn:#1b1b1b; --btn-red:#3a1112; --btn-red-border:#5a1a1b; --shadow:rgba(0,0,0,0.35); --msg-color: #ffffff; --nick-color: #d7d7d7;
  --radius:10px; --input-h:42px;
  --panel-pad:8px;
  --composer-gap:6px;
  --composer-pocket:calc(var(--input-h) + 14px);
  --list-pad-inline:15px;
  --ring:rgb(180, 180, 180); 
  --ring-soft: rgba(65, 65, 65);
  --danger:#ff5b5b;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 14px;
  --font-size-ui: 15px;
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;} 
html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--font-size-base);
  line-height:1.45;
}
body{overflow-y:auto}

/* Browsers use native UI fonts on inputs/buttons unless explicitly matched to the page. */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.messages{ color: var(--msg-color); }

.layout{
  display:grid; grid-template-columns:1.7fr 0.7fr; gap:12px; padding:10px 12px 12px;
  height:100svh; min-height:600px; box-sizing:border-box; min-width:0; align-items:stretch;
}

.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--panel-pad); display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden; }
.panel.dark{background:var(--panel-dark)}

.right{ display:grid; grid-template-rows:auto minmax(0, 1fr); gap:10px; min-height:0; min-width:0; height:auto; overflow:visible; }
.right .panel{ padding:0; }
.right .participantsPanel{ padding:0; }
.right .chatPanel{ padding:var(--panel-pad); background:var(--panel); }

.playerPanel{overflow:hidden;padding:6px var(--panel-pad) 8px;}
.playerWrap{display:flex;flex-direction:column;gap:6px;min-height:0}
.streamBrand{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto;
  width:max-content;
  max-width:100%;
  line-height:0;
  text-decoration:none;
  cursor:pointer;
  transition:opacity 0.2s ease;
}
.streamBrand:hover{ opacity:0.8; }
body.logged-in .streamBrand{ display:flex; }
.streamBrand img,
.streamBrand .brandLogo{
  /* Wide wordmark: fixed height letterboxes empty bands; size by width instead. */
  width:min(320px, 76vw);
  height:auto;
  max-height:36px;
  display:block;
  object-fit:contain;
}

.videoBox{ position:relative; width:100%; aspect-ratio:16/9; height:auto; border-radius:8px; overflow:hidden; background:#000; box-shadow:0 2px 10px var(--shadow); pointer-events:auto; }
.videoBox > video, .videoBox > .screenMain { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .25s ease; }
.videoBox > video.is-hidden, .videoBox > .screenMain[hidden]{ opacity:0; pointer-events:none; z-index:0; }
.videoBox > video.is-visible, .videoBox > .screenMain:not([hidden]){ opacity:1; pointer-events:auto; z-index:1; }

.streamChrome{
  position:absolute; right:6px; bottom:6px; z-index:2; pointer-events:none;
}
.streamChrome[hidden]{ display:none !important; }
.streamChromeBar{
  pointer-events:auto;
  display:flex; align-items:center; gap:2px;
  padding:3px 5px;
  border-radius:6px;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(6px);
}
.streamChromeBtn{
  flex:0 0 auto;
  width:28px; height:28px; min-height:0; padding:0; margin:0;
  border:none; border-radius:4px; cursor:pointer;
  background-color:transparent;
  background-position:center;
  background-size:16px 16px;
  background-repeat:no-repeat;
  /* Subtle by default; full white + highlight on hover/focus so the chrome
     doesn't distract during viewing. */
  opacity:.5;
  transition:opacity .15s ease, background-color .15s ease;
}
/* Only background-color on hover — the `background` shorthand would reset
   background-size/position/repeat and tile the icon. */
.streamChromeBtn:hover, .streamChromeBtn:focus-visible{
  opacity:1;
  background-color:rgba(255,255,255,.12);
}
.streamChromeBtn--vol{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E");
}
.streamChrome--muted .streamChromeBtn--vol{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E");
}
.streamChromeBtn--fs{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E");
}
.streamChromeVolSlider{
  width:0; height:4px; margin:0; padding:0; opacity:0;
  accent-color:#fff; cursor:pointer;
  transition:width .15s ease, opacity .15s ease;
}
.streamChrome--vol-open .streamChromeVolSlider{
  width:min(72px, 18vw); opacity:1;
}
@media (max-width:480px){
  .streamChrome--vol-open .streamChromeVolSlider{ width:min(56px, 22vw); }
}

.status{text-align:center;color:var(--muted);margin-top:8px;min-height:22px;font-weight:700}
.streamQualityToggle{background:none;border:none;padding:0;margin:0;font:inherit;font-weight:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.streamQualityToggle:hover{color:var(--text)}
.streamCodecLabel{font-weight:inherit}
.screenSwitcher{display:flex;justify-content:center;margin-top:6px;min-height:40px}
.screenSwitcher button{
  height:36px;
  padding:0 16px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--btn);
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-sans);
  font-size:var(--font-size-base);
  font-weight:700;
  color:var(--muted);
  -webkit-appearance:none;
  appearance:none;
}

@media (min-width:769px){ .videoBox{min-height:320px} }
@media (max-width:768px){ .videoBox{max-height:calc(100svw * 9 / 16)} }


.participantsPanel{ block-size:clamp(200px, 30svh, 400px); min-width:0; overflow:hidden; display:flex; flex-direction:column; }
.participantsPanelHeader{
  flex:0 0 auto; padding:8px var(--list-pad-inline); border-bottom:1px solid var(--line);
  background:var(--panel-dark);
}
.sessionMeta{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.sessionRoomLabel{
  flex:1 1 auto; min-width:0; font-weight:700; font-size:1rem; line-height:1.25; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sessionElapsed{
  flex:0 0 auto; font-variant-numeric:tabular-nums; font-size:0.95rem; color:var(--muted);
}
.participants{ flex:1 1 0; min-block-size:0; overflow:auto; border:none; border-radius:8px;
  padding-block:6px; padding-inline:var(--list-pad-inline); min-width:0; scrollbar-gutter:stable; }
.p{display:flex;align-items:center;gap:10px;padding:10px 6px;border-radius:10px;min-width:0;overflow:hidden}
.who{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0;border:1px solid transparent;border-radius:12px;padding:8px 0;transition:background-color .15s,border-color .06s}
.who .name{flex:1 1 auto;min-width:0;color:#d6d6d6;font-size:1.2rem;line-height:1.25;padding:1px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .screenBadge{flex:0 0 auto; width:20px; height:20px; background-position:center; background-repeat:no-repeat; background-size:18px 18px; opacity:.9; display:flex; align-items:center; justify-content:center}

.avatar{flex:0 0 60px; width:60px; height:60px; border-radius:50%; position:relative; background:#2b2b2b center/24px 24px no-repeat; overflow:hidden}
.avatar.me{background:#6b6b6b center/24px 24px no-repeat}
.avatar video{position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; cursor:pointer; border-radius:50% !important; object-position:center !important; clip-path:circle(50% at 50% 50%) !important;}
.who .avatar video{position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50% !important; object-position:center !important; clip-path:circle(50% at 50% 50%) !important;}
.who.active .avatar{outline: 2px solid var(--ring); outline-offset: 2px;}
.video-mirrored { transform: scaleX(-1) !important; }

.micState{flex:0 0 20px;width:20px;height:20px;background-position:center;background-repeat:no-repeat;background-size:18px 18px;opacity:.9;display:flex;align-items:center;justify-content:center}
.rowRight{flex:0 0 auto;margin-left:auto;display:flex;flex-direction:column;gap:6px;align-items:center}
.modButtons{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.miniIcon{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--btn) center/16px 16px no-repeat;cursor:pointer;display:flex;align-items:center;justify-content:center}
.miniIcon.icon-has-img,.micState.icon-has-img,.screenBadge.icon-has-img{background-image:none}
.avatar.avatar--has-icon{background-image:none}
/* Placeholder person icon is an <img> (CSP-friendly) — center it in the circle
   instead of letting it sit in the top-left corner of the relative container. */
.avatar > .icon-dynamic{position:absolute;inset:0;margin:auto}
.miniIcon.red{background-color:var(--btn-red);border-color:var(--btn-red-border)}
.miniIcon:disabled{opacity:0.5;cursor:not-allowed}
.miniIcon:focus{outline:2px solid var(--primary);outline-offset:2px}


.chatPanel{ display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden; background:var(--panel); min-height:160px; }
.m{ margin:4px 0; line-height:1.4; }
.m .from{ font-weight:700; color:var(--nick-color); margin-right:6px; }
.app-hidden{ visibility:hidden; }
.chat{display:flex; flex-direction:column; min-height:0; min-width:0; flex:1 1 0; gap:var(--composer-gap); overflow:hidden}
.messages{ position:relative; flex:1 1 0; min-height:50px; overflow:auto; border:1px solid var(--line); border-radius:8px;
  padding-block:6px; padding-inline:var(--list-pad-inline); background:var(--panel-dark); overscroll-behavior:contain; scrollbar-gutter:stable; }


.chat-link {
  color: var(--primary, #eeeeee);
  text-decoration: underline;
  cursor: pointer;
  word-break: break-all;
}
.chat-link:hover {
  color: var(--primary-hover, #a5a5a5);
  text-decoration: underline;
}
.chat-link:visited {
  color: var(--primary-visited, #a1a1a1);
}


.chat-image {
  max-width: 100px;
  max-height: 100px;
  border-radius: 8px;
  margin: 4px 0;
  cursor: pointer;
  border: 1px solid var(--line);
  transition: opacity 0.2s;
  vertical-align: top;
  display: inline-block;
}
.chat-image:hover {
  opacity: 0.9;
}


.composer.drag-over {
  background-color: var(--primary);
  border: 2px dashed var(--primary);
}
.composer.drag-over .composerInner {
  opacity: 0.7;
}


body.drag-over {
  background-color: rgba(213, 213, 213, 0.1);
  position: relative;
}
body.drag-over::before {
  content: "Drag & drop here.";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(35, 35, 35, 0.8);
  color: white;
  padding: 20px 40px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: bold;
  z-index: 9999;
  pointer-events: none;
  border: 2px dashed rgba(255, 255, 255, 0.5);
}


.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  cursor: default;
  overflow: hidden;
}
.image-modal-content {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 8px;
  cursor: grab;
  transition: transform 0.2s ease;
  user-select: none;
}
.video-modal-content{
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  cursor: default;
  background: #000;
}
.image-modal-content:active {
  cursor: grabbing;
}
.image-modal-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.image-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent !important;
  color: white;
  border: none !important;
  width: 120px;
  height: 120px;
  border-radius: 0 !important;
  cursor: pointer;
  font-size: 48px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  z-index: 1001;
  opacity: 0.2;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
.image-modal-nav:hover {
  opacity: 1;
}
.image-modal-nav.prev {
  left: 5px;
}
.image-modal-nav.next {
  right: 5px;
}
.image-modal-nav.hidden {
  display: none;
}
.image-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  color: white;
  border: none;
  width: 60px;
  height: 60px;
  cursor: pointer;
  font-size: 32px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  z-index: 1001;
  opacity: 0.2;
}
.image-modal-close:hover {
  opacity: 1;
}


@media (max-width: 768px) {
  .image-modal-nav {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }
  
  .image-modal-nav:active {
    background: transparent !important;
    box-shadow: none !important;
  }
}


/* Attach-count badge: outside top-left of paperclip only (padding reserves space vs share) */
.mediaBtnAnchor{
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  padding-left:9px;
  overflow:visible;
  box-sizing:border-box;
}
.mediaBtnAnchor>.iconBtn{
  display:block;
  width:100%;
}
.media-counter{
  position:absolute;
  top:0;
  left:9px;
  transform:translate(-50%,-50%);
  z-index:2;
  width:18px;
  height:18px;
  padding:0;
  border-radius:50%;
  background:var(--primary,#6d6d6d);
  color:#fff;
  border:1px solid rgba(0,0,0,.35);
  box-shadow:0 0 0 2px var(--btn);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  line-height:1;
  pointer-events:none;
}
.media-counter--hidden{
  display:none;
}


.composer{position:relative;flex:0 0 auto;width:100%;min-width:0;overflow:visible}
.composerInner{display:grid;grid-template-rows:auto auto;gap:var(--composer-gap);width:100%;min-width:0;overflow:visible}
.composerControls{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:var(--composer-gap);
  width:100%;
  overflow:visible;
}
.composerControls>.split,
.composerControls>.iconBtn{min-width:0;width:100%}
.composerRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--composer-gap);
  width:100%;
  align-items:stretch;
}
.composerRow #chatInput{width:100%}
.iconBtn{height:var(--input-h);width:100%;min-width:0;border-radius:10px;border:1px solid var(--line);background:var(--btn) center/20px 20px no-repeat;cursor:pointer;position:relative}
.iconBtn.iconBtn--has-img{background-image:none}
.iconBtn .btn-icon-img{position:absolute;inset:0;margin:auto;width:20px;height:20px;pointer-events:none}
.iconBtn.red{background-color:var(--btn-red);border-color:var(--btn-red-border)}
.icon-dynamic{display:block;object-fit:contain;flex-shrink:0}
.track-video{width:100%;height:100%;object-fit:contain}
.track-video--block{display:block}
.modButtonsGrid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px}
.composerRow .file-input-hidden{display:none!important}
.split{position:relative;display:flex;min-width:0;width:100%}
.composerControls .split .main{flex:1 1 auto;width:auto;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0}
.composerControls .split .arrow{flex:0 0 28px;width:28px;min-width:28px;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;background-image:none;position:relative;transition:background-color .15s}
.composerControls .split .arrow.active{background-color:rgba(255,255,255,0.1)}
.split .arrow::after{content:""; position:absolute; inset:0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%23cfcfcf' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-position: center; background-repeat: no-repeat; background-size: 12px 12px;}
.menu{position:fixed; z-index:20; min-width:200px; width:max-content; max-width:300px; max-height:200px; overflow-y:auto; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px var(--shadow); padding:6px; display:none}
.menu.open{display:block}
.menu h4{margin:6px 8px 4px;font-size:12px;color:var(--muted)}
.menu .item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu .item:hover{background:#1f1f1f}
.menu .item.selected{background:#2a2a2a;border:1px solid var(--line)}


@media (max-width:1000px) {
  .menu{max-width:calc(100vw - 20px)}
}

@media (min-width:1001px) {
  .menu{max-width:calc(40vw - 40px)}
}

input[type="text"]{
  height:var(--input-h);
  flex:1;
  background:#1d1d1d;
  color:#eaeaea;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 12px;
  box-sizing:border-box;
  min-width:0;
  font-family:var(--font-sans);
  font-size:var(--font-size-base);
  line-height:var(--input-h);
  -webkit-appearance:none;
  appearance:none;
}
button.send{
  height:var(--input-h);
  min-height:var(--input-h);
  background:#1d1d1d;
  color:#eaeaea;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 12px;
  cursor:pointer;
  font-family:var(--font-sans);
  font-size:var(--font-size-base);
  font-weight:700;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  -webkit-appearance:none;
  appearance:none;
}
button.send:focus{outline:none}
button.send:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
button.send:disabled{opacity:0.45;cursor:not-allowed}


.modal{ position:fixed; inset:0; display:grid; place-items:center; background:#0B0B0B; z-index:50; padding:10px; }
.modal.modal--overlay{
  background:rgba(0,0,0,.9);
  display:flex;
  justify-content:center;
  align-items:center;
}
.modal.is-closed{ display:none !important; }
/* Close control on dimmed overlay (same placement as .image-modal-close) */
.modal-overlay-close{
  position:absolute;
  top:20px;
  right:20px;
  z-index:2;
  width:60px;
  height:60px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  color:#fff;
  font-size:32px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.2;
  transition:opacity .2s;
}
.modal-overlay-close:hover,
.modal-overlay-close:focus-visible{ opacity:1; outline:none; }
.box{ width:clamp(240px, 88vw, 320px); max-height:86svh; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; }
.box h3{ margin:0 0 8px; font-weight:800; text-align: center; width: 100%; font-size:15px; line-height:2; }
.loginForm{display:flex;flex-direction:column;gap:8px}
.loginForm[hidden]{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nameError{margin:0;font-size:13px;line-height:1.35;color:var(--danger);text-align:center}
.loginForm input{
  height:var(--input-h);
  min-height:var(--input-h);
  width:100%;
  background:#1d1d1d;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 12px;
  box-sizing:border-box;
  font-family:var(--font-sans);
  font-size:var(--font-size-ui);
  line-height:var(--input-h);
  -webkit-appearance:none;
  appearance:none;
}
.loginActions{display:flex;justify-content:center;gap:8px}
.loginActions button{
  width:auto;
  height:var(--input-h);
  min-height:var(--input-h);
  padding:0 16px;
  background:#1d1d1d;
  color:#eaeaea;
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  font-family:var(--font-sans);
  font-size:var(--font-size-ui);
  font-weight:700;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  -webkit-appearance:none;
  appearance:none;
}



@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .device-switch-spinner .spinner {
    animation: none !important;
  }
  
  .toast {
    transition: none !important;
  }
}


@media (max-width:1049px){
  body{overflow-y:auto}

  .layout{grid-template-columns:1fr; grid-template-rows: auto minmax(0, 1fr); height:auto; min-height:100svh}
  
  .right{
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
  }

  .participantsPanel{ block-size: 100%; overflow: hidden; }

  .chat{ min-height: 0; }
  .chatPanel{
    max-block-size: none;
    overflow: hidden;
    background: var(--panel);
  }

  .messages{
    min-height: 50px;
    flex: 1 1 0;
    max-block-size: none;
    overflow: auto;
  }

  
  .playerPanel {
    flex-shrink: 0;
  }

  
  .avatar {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
  }

  
}

@media (orientation: landscape) and (min-width:1050px){
  .layout{
    height: 100svh;
  }
  .right{
    
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
  }
  .chat{
    min-height: 0;
  }
  .messages{
    min-height: 50px;
    overflow: auto;
  }
  .participantsPanel{
    block-size: clamp(320px, 62svh, 720px);
  }
  .avatar {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
  }
}

.nameModBar {
  width:100%;
  margin:0 0 8px;
  font-size:var(--font-size-ui);
  line-height:1.35;
  color:var(--muted);
  text-align:center;
}
#nameModal .nameModBar{
  text-align:center;
}

.modAuthSignedIn[hidden]{
  display:none !important;
}
.modAuthSignedIn:not([hidden]){
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;
}
.modAuthSignedInText{
  margin:0 0 12px;
  width:100%;
  text-align:center;
  font-family:var(--font-sans);
  font-size:var(--font-size-ui);
  line-height:1.35;
  color:var(--muted);
}

.mod-logout-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

.mod-logout-link:hover {
  color: var(--primary-hover);
}

.loginActions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.loginActions button[type="submit"] {
  width: auto;
  min-width: 7rem;
  max-width: 50%;
  padding: 0 20px;
  align-self: center;
}

/* Text UI that does not use form controls — match page font stack explicitly */
.toast,
.mod-login-hint,
.mod-login-back,
.nameModBar,
.modAuthSignedInText,
.menu h4,
.menu .item,
body.drag-over::before {
  font-family: var(--font-sans);
}

/* Mod action feedback toast */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
  animation: toast-in 0.15s ease;
}
.toast-error { background: var(--btn-red); border-color: var(--btn-red-border); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}