/* watch.html: the world seen without logging in (server/watch.js). Letterbox bars, a fade between lands, a title card per land. */
body.watching{overflow:hidden;background:#0d0f0b;cursor:default}
.watch-bar{position:fixed;left:0;right:0;height:clamp(28px,8vh,72px);background:#000;z-index:15;pointer-events:none}
#watch-bar-top{top:0}
#watch-bar-bot{bottom:0}
#watch-fade{position:fixed;inset:0;background:#000;z-index:16;opacity:0;pointer-events:none;transition:opacity 1.6s ease-in-out}
#watch-fade.on{opacity:1}
#watch-title{position:fixed;left:0;right:0;bottom:calc(clamp(28px,8vh,72px) + 9vh);z-index:17;text-align:center;pointer-events:none;opacity:0;padding:0 16px}
#watch-title.show{animation:wtitle 6.5s ease-in-out forwards}
@keyframes wtitle{0%{opacity:0;transform:translateY(8px)}18%{opacity:1;transform:none}72%{opacity:1}100%{opacity:0}}
#watch-title-name{font:clamp(30px,6vw,60px)/1.1 "IM Fell English",Georgia,serif;color:#f1d58c;text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 2px #000;letter-spacing:.02em}
#watch-title-sub{font:clamp(14px,2vw,19px)/1.4 "Alegreya Sans",system-ui,sans-serif;color:#e6dcc6;text-shadow:0 1px 8px #000;margin-top:6px;letter-spacing:.14em;text-transform:uppercase}
#watch-card{position:fixed;left:max(16px,env(safe-area-inset-left));top:0;height:clamp(28px,8vh,72px);z-index:20;display:flex;align-items:center;gap:12px;
  color:#ede5d3;pointer-events:none;max-width:calc(100vw - 32px)}
#watch-live{font:700 12px/1 "Alegreya Sans",system-ui,sans-serif;letter-spacing:.12em;color:#ff9e90;display:flex;align-items:center;gap:6px}
#watch-live .dot{width:8px;height:8px;border-radius:50%;background:#e5534b;animation:wpulse 1.6s infinite}
@keyframes wpulse{0%,100%{opacity:1}50%{opacity:.35}}
#watch-zone{font:17px/1 "IM Fell English",Georgia,serif;color:#cdb98a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#watch-play{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(4px,calc((clamp(28px,8vh,72px) - 38px) / 2));z-index:20;padding:9px 18px;border-radius:8px;
  background:#bb9951;color:#17130e;font:700 16px/20px "Alegreya Sans",system-ui,sans-serif;text-decoration:none}
@media (max-height:480px){#watch-play{bottom:6px;padding:6px 12px}}
#watch-sound{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:0;height:clamp(28px,8vh,72px);z-index:20;display:flex;align-items:center;gap:10px;color:#cdb98a;
  font:14px "Alegreya Sans",system-ui,sans-serif}
#watch-mute{width:36px;height:36px;border-radius:50%;border:1px solid rgba(236,199,108,.4);background:rgba(255,255,255,.06);color:#ecc76c;font-size:17px;line-height:1;cursor:pointer;padding:0}
#watch-mute:focus-visible,#watch-vol:focus-visible{outline:2px solid #ecc76c;outline-offset:2px}
#watch-vol{width:clamp(80px,14vw,160px);accent-color:#bb9951;cursor:pointer}
@media (max-width:420px){#watch-hint{display:none}#watch-vol{width:72px}}
#watch-play:focus-visible{outline:2px solid #ecc76c;outline-offset:2px}
#watch-msg{position:fixed;inset:0;display:grid;place-items:center;z-index:30;color:#ede5d3;font:18px "Alegreya Sans",system-ui,sans-serif;background:rgba(13,15,11,.7);text-align:center;padding:16px}
#watch-msg.hidden{display:none}
@media (prefers-reduced-motion:reduce){#watch-live .dot{animation:none}#watch-fade{transition:none}}
/* ?embed=1: the website's live background: only the world */
body.embed .watch-bar,body.embed #watch-card,body.embed #watch-sound,body.embed #watch-play,body.embed #watch-title,body.embed #watch-msg{display:none!important}