/* The live site theme and shell are loaded from shared/. Assets stay inside
   /watch so the existing Discord Activity URL mappings also serve the brand. */
:root {
  --mist: var(--muted); --faint: var(--dim);
  --hull: var(--panel); --hull-raised: var(--panel-strong);
  --abyss: var(--paper); --steel: var(--line);
  --rune: var(--accent-muted); --danger: var(--coral);
  --font-sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans); --font-mono: "SFMono-Regular", Consolas, monospace;
}
[hidden] { display: none !important; }
.wn { --gold: var(--signal); padding-block: clamp(2rem, 5vw, 4rem); }
.wn h1 { font-size: clamp(2.7rem, 7vw, 6rem); font-weight: 900; line-height: .95; letter-spacing: -.06em; text-transform: uppercase; margin: 1.2rem 0 1.8rem; }
.wn h2, .wn h3 { font-weight: 850; letter-spacing: -.035em; }
.wn-kicker { color: var(--muted); font-weight: 800; }
.wn-kicker::before { content: ""; width: .48rem; height: .48rem; background: var(--signal); flex-shrink: 0; }
.wn button, .wn-discussion { min-height: 44px; padding: .78rem 1rem; border-radius: 0; font-size: .75rem; font-weight: 800; letter-spacing: .025em; background: transparent; }
.wn button:hover { border-color: var(--ink); }
.wn .wn-primary { background: var(--signal); border-color: var(--signal); color: var(--accent-ink); }
.wn .wn-primary:hover { background: var(--accent-gradient); }
.wn button[aria-pressed=true] { border-color: var(--signal); background: var(--panel-strong); }
.wn-panel, .wn-event-card, .wn-empty, .wn-queue-edit { border-radius: 0; }
.wn-panel { border-top: 2px solid var(--line); }
.wn-panel summary { font-size: .86rem; font-weight: 800; }
.wn-panel[open] { border-top-color: var(--signal); }
.wn button.wn-event-card { display: block; padding: 0; text-align: left; white-space: normal; letter-spacing: normal; }
.wn-calendar { margin-bottom: 2rem; }
.wn-empty { grid-column: 1 / -1; background: var(--panel); border-style: solid; }
.wn-art { background: var(--panel-strong); background-image: linear-gradient(135deg, transparent 50%, #b8a7e90a 50%); }
.wn-badge { border-radius: 0; font-family: var(--font-mono); }
.wn-badge--playing, .wn-badge--countdown { background: var(--panel); color: var(--green); border-color: var(--green); }
.wn input:not([type=checkbox]):not([type=range]), .wn textarea, .wn select { border-radius: 0; }
.wn-screen { border-radius: 0; background: #000; }
.wn-screen-overlay { background: linear-gradient(145deg, var(--panel-strong), var(--paper)); font-size: clamp(1.1rem, 2vw, 1.8rem); font-weight: 800; }
.wn-screen-overlay--soft { background: color-mix(in srgb, var(--paper) 85%, transparent); }
.wn-screen video { display: block; }
.wn-playback-bar { border-radius: 0; }
.wn-buffer { border-radius: 0; background: var(--panel-strong); }
.wn-announcement { border-radius: 0; background: var(--panel); }
.wn-inline-form { margin-top: 1.2rem; }
.wn-sidebar, .wn-room-grid > * { min-width: 0; }
.wn p, .wn h2, .wn h3 { overflow-wrap: anywhere; }
.wn-panel summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.wn a:not(.wn-event-card):hover { color: var(--signal); }
.wn-room-header h1 { font-size: clamp(2rem, 4vw, 3.4rem); }
@media (max-width: 760px) {
  .wn { padding-top: 2rem; }
  .wn h1 { font-size: clamp(2.6rem, 11vw, 4rem); }
  .wn-playback-bar { flex-wrap: wrap; }
  .wn-playback-bar progress { order: 5; flex-basis: 100%; }
  .wn-inline-form { align-items: stretch; flex-direction: column; }
}
:root[data-theme="light"] .wn { --danger: #a42525; }

/* Browsing is the primary surface. Playback/settings keep the shared site theme. */
.wn-modal{color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px;width:min(1000px,calc(100vw - 32px));max-height:92dvh;overflow:auto;box-sizing:border-box;box-shadow:0 24px 100px #0009}
.wn-modal::backdrop{background:#05070bc9;backdrop-filter:blur(8px)}.wn-confirm{max-width:500px}.wn-modal h2{font-size:1.5rem}.wn-preview-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:1.1rem;font-weight:700}.wn-preview-heading button{white-space:nowrap}.wn-preview .wn-screen{width:100%;aspect-ratio:16/9;max-height:58dvh;min-height:140px}.wn-preview video{height:100%;width:100%;object-fit:contain}.wn-preview-notice:empty{display:none}
.wn .wn-branded-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:24px;background:radial-gradient(ellipse at top,#b8a7e918,transparent 65%),var(--panel-strong);box-sizing:border-box}.wn .wn-branded-state[hidden]{display:none}.wn-branded-state img{width:clamp(32px,7vw,64px);height:auto}.wn-state-brand{font-size:.75rem;letter-spacing:.15em}.wn-state-title{font-size:clamp(1rem,3vw,2.1rem);line-height:1.2;max-width:650px}.wn-state-copy{font-size:.85rem;font-weight:400;margin:0;max-width:560px;color:var(--muted)}
#app>.wn-branded-state{min-height:350px;position:static;border-radius:20px}.wn-episode-actions{display:flex;gap:8px;flex-wrap:wrap}.wn-title-genres{color:var(--signal);font-weight:600}.wn-title-hero .wn-panel{padding:12px;font-size:.82rem}.wn-title-hero .wn-panel p{display:block;-webkit-line-clamp:unset}.wn-title-hero a{color:var(--signal)}.wn-related{margin-top:32px}.wn-calendar-tile{min-width:0}.wn-calendar-tile>.wn-event-card{width:100%;height:calc(100% - 60px)}.wn-calendar-tile>.wn-actions{margin-top:10px}.wn-section-nav{margin-bottom:24px}#watch-events{scroll-margin-top:90px}.wn-file-list label{gap:10px;flex-wrap:wrap}.wn-file-list label>button{margin-left:auto}.wn-lineup li{flex-wrap:wrap}
@media(max-width:600px){.wn-modal{padding:14px}.wn-preview-heading{font-size:.9rem}.wn-preview-heading button{font-size:.7rem;padding:8px}.wn-preview .wn-branded-state{gap:8px;padding:12px}.wn-preview .wn-state-copy{font-size:.65rem}.wn-state-title{font-size:1rem}.wn-title-hero .wn-panel{grid-column:1/-1}}
.wn-poster-rail{scrollbar-width:thin;scrollbar-color:var(--line) transparent}.wn-episode-card>details{grid-column:1/-1;min-width:0}
.wn-host-catalog.wn-has-lineup .wn-queue-panel{position:fixed;bottom:18px;left:24px;z-index:31;margin:0;background:var(--panel);border-radius:20px;box-shadow:0 6px 28px #0008;max-width:calc(100% - 180px)}
.wn-host-catalog.wn-has-lineup .wn-queue-panel[open]{bottom:84px;width:440px;max-width:calc(100% - 48px);max-height:65vh;overflow:auto}
.wn-host-catalog.wn-has-lineup{padding-bottom:80px}
.wn .wn-host-catalog{padding:0;border:0;background:none}.wn-host-catalog>summary{display:none}.wn-host-catalog>form{margin:0}
.wn-catalog{min-width:0;margin-bottom:2.5rem}.wn-catalog-toolbar{display:flex;align-items:end;gap:12px}.wn-catalog-toolbar label{flex:1;margin:0}.wn-catalog-toolbar input{height:48px}.wn-catalog-tabs{display:flex;gap:8px;overflow:auto;padding:18px 0 8px;scrollbar-width:none}.wn-catalog-tabs button{white-space:nowrap;flex-shrink:0;border-color:transparent;border-radius:24px;min-height:38px;padding:8px 16px}.wn-catalog-status{min-height:1.3em;font-size:.85rem;margin:8px 0}
.wn-shelf{margin:0 0 32px}.wn-shelf>h3{font-size:1.25rem;margin:0 0 16px}.wn-poster-rail{display:grid;grid-auto-flow:column;grid-auto-columns:170px;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 15px}.wn-poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:24px 18px}
.wn button.wn-poster-card{display:flex;flex-direction:column;align-items:stretch;justify-content:start;text-align:left;gap:8px;min-width:0;padding:0;border:0;letter-spacing:normal;font-weight:600;scroll-snap-align:start;transition:transform .16s}.wn button.wn-poster-card:hover{transform:translateY(-4px)}.wn-poster-card>strong{font-size:.9rem;line-height:1.3}.wn-poster{aspect-ratio:2/3;position:relative;overflow:hidden;border-radius:10px;background:linear-gradient(150deg,#463133,var(--panel-strong) 65%);width:100%;box-shadow:0 8px 20px #0003}.wn-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.wn-poster-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:15px;font-size:1.2rem;font-weight:800;color:var(--ink)}
.wn-title-hero{display:grid;grid-template-columns:210px 1fr;gap:32px;padding:28px;border-radius:16px;background:linear-gradient(120deg,var(--panel-strong),var(--paper));margin:8px 0 24px}.wn-title-hero h2{font-size:clamp(1.6rem,3vw,3rem);margin:0 0 12px}.wn-title-hero .wn-back{padding:0;border:0;min-height:30px;margin:0 0 16px}.wn-title-hero p{font-size:.9rem;max-width:700px}.wn-episode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}.wn-episode-card{display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:10px}.wn-episode-art{display:grid;place-items:center;align-self:start;aspect-ratio:1;border-radius:8px;background:var(--panel-strong);font-size:2rem;font-weight:800;color:var(--signal)}.wn-episode-card h3{margin:0 0 8px;font-size:1rem}.wn-episode-card p{font-size:.8rem;margin:0 0 10px}.wn-episode-card button{min-height:38px;border-radius:6px;font-size:.72rem}.wn-host-catalog.wn-has-lineup .wn-play-now{position:fixed;bottom:20px;right:24px;z-index:30;border-radius:28px;box-shadow:0 6px 28px #0008;padding:14px 28px;font-size:.95rem}
@media(max-width:760px){.wn-poster-rail{grid-auto-columns:135px;gap:12px}.wn-poster-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}.wn-poster-card>strong{font-size:.76rem}.wn-title-hero{grid-template-columns:100px minmax(0,1fr);gap:18px;padding:16px}.wn-title-hero h2{font-size:1.5rem}.wn-title-hero p{font-size:.8rem}.wn-title-hero>div>p:last-of-type{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.wn-episode-grid{grid-template-columns:1fr}.wn-episode-card{padding:14px;grid-template-columns:55px minmax(0,1fr)}.wn-catalog-tabs{gap:2px}.wn-catalog-tabs button{font-size:.7rem;padding:8px 12px}.wn-host-catalog.wn-has-lineup .wn-play-now{right:16px;bottom:18px}}

/* Compact alternate sources, using the shared Watch Nights palette. */
.wn-source-options { margin-top: 1rem; min-width: 0; grid-column: 1 / -1; }
.wn-source-options > .wn-actions { justify-content: space-between; }
.wn-source-list { display: grid; gap: .75rem; }
.wn-source-card { border: 1px solid var(--line); border-radius: 14px; padding: 1rem; min-width: 0; }
.wn-source-card > div { min-width: 0; }
.wn-source-card p { margin: .4rem 0; }
.wn-source-card details { margin: .5rem 0; }
.wn-source-card .wn-source-filename { overflow-wrap: anywhere; white-space: pre-line; font-size: .85rem; }
.wn-source-options > button { margin-top: .75rem; }
.wn-episode-card > div { min-width: 0; width: 100%; }
.wn-youtube-player,.wn-youtube-player iframe{width:100%;height:100%;border:0}
