.watch-page{--monitor-width:min(100%,calc((100dvh - 135px) * 16 / 9));background:#05070a;min-height:100dvh;display:flex;flex-direction:column}.watch-page header,.watch-page footer{width:var(--monitor-width);margin-inline:auto;flex-shrink:0}.watch-page header{padding:10px 20px;gap:15px}.watch-page header .logo{width:172px}.watch-page header a:not(.logo){text-decoration:none;font-size:12px}.watch-page #connection{font-size:11px;color:var(--muted)}#quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));width:var(--monitor-width);margin:auto;flex:none;aspect-ratio:16/9;background:#000;overflow:hidden}.tile{position:relative;min-width:0;min-height:0;background:#080c12;overflow:hidden;outline:none;touch-action:manipulation;cursor:pointer}.tile video{width:100%;height:100%;object-fit:contain;display:block;background:#000;pointer-events:none}.tile.selected:after{position:absolute;inset:0;content:'';box-shadow:inset 0 0 0 3px #38ef88;pointer-events:none;z-index:5}.tile:focus-visible{outline:2px solid #76aeff;outline-offset:-4px}.tile-label{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:8px 13px;background:rgba(0,0,0,.5);color:white;transform:translateY(100%);transition:transform .25s;pointer-events:none;z-index:3;font-size:12px}.show-label .tile-label{transform:translateY(0)}.tile-label strong{letter-spacing:.1em}.tile-message{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:center;background:#0d131de8;pointer-events:none;text-align:center;padding:10px}.tile-message strong{font-size:clamp(22px,4vw,48px);letter-spacing:.12em;color:#7b8c9e}.tile-message span{font-size:12px;color:var(--muted)}.tile-message small{font-size:10px;color:#7b8c9e}.watch-page footer{padding:10px 16px;gap:8px;font-size:10px}.watch-page.expanded #quad{position:fixed;inset:0;max-height:none;height:100dvh;width:100vw;aspect-ratio:auto;z-index:100;display:block}.watch-page.expanded .tile{display:none;height:100%;width:100%}.watch-page.expanded .tile.expanded{display:block}#quad:fullscreen{height:100%;width:100%;max-height:none}.watch-page.expanded footer,.watch-page.expanded header{visibility:hidden}#watch-notice{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);padding:10px 20px;background:#342919;color:#f7dda9;border:1px solid #6c542d;border-radius:5px;z-index:200;font-size:12px;max-width:90vw}@media(orientation:portrait) and (max-width:700px){.watch-page{--monitor-width:100%}.watch-page header{padding:8px 10px;gap:10px}.watch-page header>div{display:none}.watch-page header .logo{width:145px}#quad{grid-template-columns:1fr;grid-template-rows:none;aspect-ratio:auto;max-height:none;overflow:visible}.tile{aspect-ratio:16/9}.watch-page.expanded .tile{aspect-ratio:auto}.watch-page footer{margin-top:10px}}@media(orientation:landscape) and (max-height:550px){.watch-page{--monitor-width:min(100%,calc((100dvh - 43px) * 16 / 9))}.watch-page header{padding:3px 10px}.watch-page header .logo{width:110px}.watch-page header>div,.watch-page footer{display:none}.watch-page header button{min-height:30px;padding:3px 8px}.tile-label{font-size:10px;padding:4px 8px}}