/* Horizon UI refresh: loaded after the inline styles, so it overrides them */
:root{
  --fs-xs:12px;--fs-sm:13px;--fs-md:15px;--fs-lg:18px;--fs-xl:clamp(26px,3vw,36px);--fs-hero:clamp(48px,7vw,96px);
  --r-ctl:10px;--r-card:16px;--r-pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.35);--sh-2:0 8px 24px -8px rgba(0,0,0,.55);--sh-3:0 24px 60px -16px rgba(0,0,0,.7);
  --muted:#a9b8d2;--cyan-soft:#8ce6ff1f;--violet-soft:#a69cff1f;--amber:#ffc46b;--surface-hover:#ffffff0d;
  --glass:rgba(12,19,35,.62);--edge:inset 0 1px 0 rgba(255,255,255,.07);
  --ui:"Inter","Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Space Grotesk",Inter,ui-sans-serif,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
body{font-family:var(--ui);font-size:var(--fs-md);-webkit-font-smoothing:antialiased}
h1,h2,h3,.home-title,.story-copy h1{font-family:var(--display)}
::selection{background:#8ce6ff55;color:#fff}
*{scrollbar-width:thin;scrollbar-color:#2b3b5a transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#2b3b5a;border-radius:var(--r-pill);border:2px solid transparent;background-clip:padding-box}

/* nothing below 12px */
.brand small,.eyebrow,.chip,.auth-hint,.auth-note,.scene-descrip,.count-pill,kbd{font-size:var(--fs-xs)!important}
.eyebrow{text-transform:none;letter-spacing:.04em}

/* glass panels */
.topbar,.sidebar,.auth-card,.scene-card,.link-button,.game-list>*,.page-head,.panel,.card{
  background-color:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:var(--edge),var(--sh-2)}
.scene-card,.link-button,.game-list>*{border-radius:var(--r-card)}

/* shell */
.topbar{height:56px;border-bottom:1px solid #94b8ff1c;border-radius:0}
.brand-symbol{border-radius:12px;background:linear-gradient(145deg,#12304d,#0c1a2e)}
.sidebar{position:relative;border-right:1px solid #94b8ff1c}
.nav-button{position:relative;display:flex;align-items:center;gap:12px;border-radius:var(--r-ctl);transition:background .12s,color .12s;color:var(--muted)}
.nav-button:hover{background:var(--surface-hover);color:var(--text)}
.nav-button.active{color:var(--text);background:transparent}
.nav-button svg,.tile-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.nav-button.active .nav-icon{color:var(--cyan);filter:drop-shadow(0 0 8px #8ce6ff88)}
#navPill{position:absolute;left:8px;right:8px;top:0;height:44px;border-radius:var(--r-ctl);pointer-events:none;
  background:linear-gradient(90deg,var(--cyan-soft),transparent);box-shadow:inset 3px 0 0 var(--cyan);
  transition:transform .28s var(--ease),height .2s}
@media(max-width:700px){
  .sidebar{position:fixed;inset:auto 0 0 0;height:60px;width:100%;display:flex;flex-direction:row;justify-content:space-around;z-index:50;border-top:1px solid #94b8ff1c}
  .nav-text{display:none}#navPill{display:none}.nav-button.active{box-shadow:inset 0 2px 0 var(--cyan)}
}
@media(max-width:900px) and (min-width:701px){:root{--rail:68px}.nav-text{display:none}.nav-button{justify-content:center}}

/* status chip */
.chip.live{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill)}
.chip.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 #8cf0c299;animation:hz-pulse 2s infinite}
.chip.live[data-state=slow]::before{background:var(--amber)}
.chip.live[data-state=offline]::before{background:var(--danger);animation:none}
@keyframes hz-pulse{70%{box-shadow:0 0 0 8px #8cf0c200}100%{box-shadow:0 0 0 0 #8cf0c200}}

/* home */
.home-title{font-size:var(--fs-hero);letter-spacing:-.045em;line-height:.98;margin:.15em 0 .35em}
.home-kicker{color:var(--muted);font-size:var(--fs-md);letter-spacing:0;text-transform:none}
.home-search{position:relative;height:60px;border-radius:var(--r-pill);background:var(--glass);border:1px solid #94b8ff2e;box-shadow:var(--edge),var(--sh-2);transition:border-color .15s,box-shadow .15s}
.home-search:focus-within{border-color:#8ce6ffaa;box-shadow:0 0 0 4px #8ce6ff1f,0 0 40px #8ce6ff22,var(--sh-2)}
.home-search input{font-size:var(--fs-lg);padding-left:52px;background:transparent}
.home-search::before{content:"";position:absolute;left:20px;top:50%;width:18px;height:18px;transform:translateY(-50%);opacity:.7;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ce6ff' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}
.primary,.primary-small{background:linear-gradient(135deg,#8ce6ff,#a69cff);color:#07101f;font-weight:700;border:0;border-radius:var(--r-ctl);
  box-shadow:inset 0 1px 0 #fff6,0 8px 24px -8px #8ce6ff88;transition:transform .1s,filter .15s}
.primary:hover,.primary-small:hover{filter:brightness(1.08)}.primary:active,.primary-small:active{transform:scale(.98)}
.home-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;max-width:760px}
.link-button{flex-direction:column;align-items:flex-start;gap:6px;padding:20px;text-align:left;border:1px solid #94b8ff24;transition:transform .15s var(--ease),border-color .15s}
.link-button:hover{transform:translateY(-3px);border-color:#8ce6ff66}
.link-button .tile-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;margin-bottom:6px}
#launchBrowser .tile-ic{background:var(--cyan-soft);color:var(--cyan)}
#launchGames .tile-ic{background:var(--violet-soft);color:var(--violet)}
#launchSettings .tile-ic{background:#ffc46b1f;color:var(--amber)}
.tile-desc{color:var(--muted);font-size:var(--fs-sm);font-weight:400}
.home-stats{display:flex;gap:18px;color:var(--muted);font:500 var(--fs-xs) var(--mono);margin-top:22px}
.home-stats i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:7px;animation:hz-pulse 2s infinite}
.home-search kbd{position:absolute;right:76px;top:50%;transform:translateY(-50%);border:1px solid #94b8ff3a;border-radius:6px;padding:2px 7px;color:var(--muted)}

/* auth */
.auth-story:before{animation:hz-spin 90s linear infinite}.auth-story:after{animation:hz-spin 60s linear infinite reverse}
@keyframes hz-spin{to{transform:rotate(360deg)}}
.auth-card input{height:48px;border-radius:var(--r-ctl);font-size:var(--fs-md);transition:border-color .15s,box-shadow .15s}
.auth-card input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px #8ce6ff2a}
.auth-card label{text-transform:none;letter-spacing:0;color:var(--muted);font-size:var(--fs-sm)}

/* games */
.game-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.game-list>*{position:relative;overflow:hidden;padding:0;min-height:120px;border:1px solid #94b8ff22;transition:transform .15s var(--ease),border-color .15s,box-shadow .15s}
.game-list>*:hover{transform:translateY(-3px);border-color:#a69cff88;box-shadow:var(--edge),0 0 28px #a69cff22,var(--sh-3)}
.game-list>*::before{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.game-filter,.game-add input{height:44px;border-radius:var(--r-pill);padding:0 18px}

/* settings */
.scene-card{border:1px solid #94b8ff22;overflow:hidden;transition:transform .15s var(--ease),border-color .15s}
.scene-card:hover{transform:translateY(-2px)}.scene-card.active{border-color:var(--cyan);box-shadow:0 0 0 3px #8ce6ff22,var(--sh-2)}
.scene-art{border-radius:calc(var(--r-card) - 4px)}
select,.subtle-button{border-radius:var(--r-ctl)}

/* motion: one orchestrated entrance, answers to input stay quick */
@media(prefers-reduced-motion:no-preference){
  .sidebar{animation:hz-in-x .5s var(--ease) both}
  .home>*{animation:hz-in-y .6s var(--ease) both}
  .home>*:nth-child(1){animation-delay:.12s}.home>*:nth-child(2){animation-delay:.2s}.home>*:nth-child(3){animation-delay:.28s}.home>*:nth-child(4){animation-delay:.36s}
  .page:not(.hidden){animation:hz-fade .18s ease both}
}
@keyframes hz-in-x{from{opacity:0;transform:translateX(-16px)}}
@keyframes hz-in-y{from{opacity:0;transform:translateY(14px)}}
@keyframes hz-fade{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.auth-story:before,.auth-story:after,.chip.live::before,.home-stats i{animation:none}}
.text-large body{font-size:18px}

/* F6 feedback, A1 maintenance */
#fbFab{position:fixed;right:20px;bottom:20px;z-index:60;border:1px solid #94b8ff33;border-radius:var(--r-pill);padding:10px 18px;color:var(--text);background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--edge),var(--sh-2)}
#fbFab:hover{border-color:#8ce6ff88}
@media(max-width:700px){#fbFab{bottom:76px}}
#fbDlg{border:1px solid #94b8ff33;border-radius:var(--r-card);background:var(--panel);color:var(--text);padding:24px;width:min(440px,92vw);box-shadow:var(--sh-3)}
#fbDlg::backdrop{background:rgba(2,4,10,.7);backdrop-filter:blur(4px)}
#fbDlg h2{margin:0 0 14px;font-size:var(--fs-xl)}
#fbDlg label{display:block;margin:10px 0;color:var(--muted);font-size:var(--fs-sm)}
#fbDlg select,#fbDlg textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border-radius:var(--r-ctl);border:1px solid #94b8ff33;background:#0a1020;color:var(--text);resize:vertical}
.fb-row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.fb-row a.subtle-button{text-decoration:none;display:inline-block}
#maintOv{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;text-align:center;background:rgba(5,8,18,.96);padding:24px}
#maintOv[hidden],html[data-admin] #maintOv{display:none}
#maintOv h1{font-size:var(--fs-hero)}#maintOv p{color:var(--muted);font-size:var(--fs-lg)}

/* Movies tab */
#launchMovies .tile-ic{background:#ff9ad51f;color:#ff9ad5}
.movies-hero{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;max-width:900px}
.movies-copy,.movies-join{padding:26px;border:1px solid #94b8ff24;border-radius:var(--r-card);background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--edge),var(--sh-2)}
.movies-copy{background-image:radial-gradient(80% 90% at 0% 0%,#a69cff2e,transparent 70%),radial-gradient(60% 80% at 100% 100%,#ff9ad524,transparent 70%)}
.movies-copy h2{margin:8px 0 10px;font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;font-family:var(--display)}
.movies-copy p{margin:0 0 20px;color:var(--muted);line-height:1.6}
.movies-actions{display:flex;flex-wrap:wrap;gap:10px}
.movies-actions .primary{padding:12px 20px}
.movies-join{display:flex;flex-direction:column;justify-content:center;gap:10px}
.movies-join label{color:var(--muted);font-size:var(--fs-sm)}
.movies-join-row{display:flex;gap:8px}
.movies-join input{flex:1;min-width:0;height:46px;border-radius:var(--r-ctl);border:1px solid #94b8ff2e;background:#060b17b0;padding:0 14px;color:var(--text);font:700 18px var(--mono);letter-spacing:.2em;text-transform:uppercase;outline:none}
.movies-join input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #8ce6ff2a}
.movies-msg{margin:14px 2px 0;min-height:18px;color:var(--amber);font-size:var(--fs-sm)}
@media(max-width:760px){.movies-hero{grid-template-columns:1fr}}

/* keep nav labels on one line */
.nav-button{white-space:nowrap}
.nav-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.movies-join h3{margin:0;font-size:var(--fs-lg);font-family:var(--display)}
.movies-join .eyebrow{color:var(--cyan)}

/* home: four tiles on one row, watch party row under them */
.home-links{grid-template-columns:repeat(4,minmax(0,1fr));max-width:960px}
.link-button{min-width:0;white-space:nowrap}
.tile-desc{white-space:normal}
@media(max-width:820px){.home-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
.home-party{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;max-width:960px;margin-top:16px;padding:10px 12px 10px 18px;border:1px solid #94b8ff24;border-radius:var(--r-pill);background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--edge),var(--sh-2)}
.home-party-label{flex:0 0 auto;white-space:nowrap;font-weight:700;color:#ff9ad5}
.home-party input{flex:1;min-width:0;height:38px;border-radius:var(--r-pill);border:1px solid #94b8ff2e;background:#060b17b0;padding:0 14px;color:var(--text);font:600 14px var(--mono);letter-spacing:.08em;text-transform:uppercase;outline:none}
.home-party input::placeholder{text-transform:none;letter-spacing:0;font-family:var(--ui);color:var(--muted)}
.home-party input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #8ce6ff2a}
.home-party button{flex:0 0 auto;white-space:nowrap}
@media(max-width:560px){.home-party-label{display:none}}