/* Family Movie Night: "Fireside". Phone-first. :root = bag-end fallback tokens until the theme kit ships (kit rules on html[data-theme] override it). */
:root{
--bg:#17110c;--surface:#21170f;--surface-2:#2b1e14;--surface-3:#36271a;--edge:#3d2c1d;--edge-strong:#5a4229;--overlay:rgba(23,17,12,.6);
--text:#f1e6cf;--text-muted:#c9b899;--text-on-accent:#241503;
--accent:#e8a33d;--accent-strong:#f4b95a;--accent-soft:rgba(232,163,61,.16);--accent-glow:rgba(232,163,61,.35);
--ok:#9cc27e;--warn:#e6b84f;--fault:#e0836a;--info:#94b8cc;--idle:#8f7f68;
--shadow-1:0 1px 3px rgba(0,0,0,.4);--shadow-2:0 6px 20px rgba(0,0,0,.45);--shadow-3:0 12px 36px rgba(0,0,0,.55);--inner-highlight:inset 0 1px 0 rgba(255,235,200,.06);
--card-glow:linear-gradient(160deg,rgba(232,163,61,.16),rgba(232,163,61,0) 60%);
--hero-gradient:radial-gradient(ellipse at 50% 40%,#3a2614 0%,#17110c 72%);
--meter-gradient:linear-gradient(90deg,#9cc27e,#e8a33d);
--radius-sm:8px;--radius-md:12px;--radius-lg:18px;
--font-display:Fraunces,Georgia,"Times New Roman",serif;
--font-body:Manrope,Literata,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-mono:ui-monospace,"Cascadia Code",Consolas,monospace;
--focus-ring:0 0 0 3px rgba(244,185,90,.7);
--ease:cubic-bezier(.2,.7,.2,1);--dur-fast:120ms;--dur-med:240ms;
--tap-min:44px;--text-base:max(16px,1rem);
--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;
--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);
/* legacy names other templates still use */
--bg-raised:var(--surface);--bg-sunken:var(--bg);--line:var(--edge);--ink:var(--text);
--ink-dim:var(--text-muted);--ink-faint:var(--text-muted);--danger:var(--fault);
--accent-ink:var(--text-on-accent);--radius:var(--radius-md);--shadow:var(--shadow-3);--font:var(--font-body);
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-med:0ms}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--text-base);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-left:var(--safe-left);padding-right:var(--safe-right)}
a{color:var(--accent-strong);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--accent-strong);outline-offset:2px}
@media (hover:hover){a:hover{text-decoration:underline}}
h1,h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;line-height:1.25}
h1{font-size:1.75rem;margin:0 0 .25rem}
h2{font-size:1.25rem;margin:1.75rem 0 .6rem}
.sub{color:var(--text-muted);margin:0 0 1.5rem}

/* top bar */
.topbar{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem;
  padding:calc(.25rem + var(--safe-top)) 1rem .25rem;background:var(--surface);
  border-bottom:1px solid var(--edge);box-shadow:var(--shadow-1);position:relative;z-index:40}
.topbar .brand{display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tap-min);
  color:var(--text);font-family:var(--font-display);font-weight:600;font-size:1.125rem}
.topbar nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem;min-width:0}
.topbar nav form{margin:0}
.topbar nav a,.linkish{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 .5rem}
.who{display:inline-flex;align-items:center;gap:.45rem;color:var(--text-muted);font-size:.9375rem;
  max-width:10ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.who::before{content:"";flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--dot,var(--accent))}
.linkish{background:none;border:0;color:var(--text-muted);font:inherit;font-size:.9375rem;cursor:pointer;touch-action:manipulation}
@media (hover:hover){.linkish:hover{color:var(--text)}}

/* layout */
.wrap{width:100%;flex:1 0 auto;max-width:1040px;margin:0 auto;padding:1.5rem 1rem calc(4rem + var(--safe-bottom))}
.wrap--narrow{max-width:460px}
.flashes{flex:none;list-style:none;margin:0;padding:.75rem 1rem 0}
.flash{padding:.7rem .9rem;border-radius:var(--radius-sm);margin-bottom:.4rem;border:1px solid var(--edge);background:var(--surface-2)}
.flash--error{border-color:var(--fault)}
.flash--success{border-color:var(--ok)}

/* forms and buttons */
label{display:block;font-size:.9375rem;color:var(--text-muted);margin-bottom:.35rem}
input,select,textarea{font:inherit;font-size:max(16px,1rem)}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;min-height:var(--tap-min);padding:.6rem .8rem;color:var(--text);background:var(--bg);
  border:1px solid var(--edge-strong);border-radius:var(--radius-sm)}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:.85}
.field{margin-bottom:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:var(--tap-min);
  min-width:var(--tap-min);padding:.55rem 1.1rem;font:inherit;font-weight:600;cursor:pointer;
  touch-action:manipulation;border-radius:var(--radius-sm);border:1px solid var(--edge-strong);
  background:var(--surface-2);color:var(--text)}
@media (hover:hover){.btn:hover{border-color:var(--accent)}}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--primary{background:var(--accent);color:var(--text-on-accent);border-color:transparent}
.btn--danger{background:transparent;color:var(--fault);border-color:var(--fault)}
.btn--ghost{background:transparent}
.btn--sm{font-size:.9375rem;padding:.4rem .8rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.5rem}

/* cards, tables */
.card{background:var(--card-glow),var(--surface);border:1px solid var(--edge);border-radius:var(--radius-md);
  padding:1.1rem;box-shadow:var(--inner-highlight),var(--shadow-1)}
.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.6rem;border-bottom:1px solid var(--edge)}
th{color:var(--text-muted);font-weight:600;font-size:.8125rem;text-transform:uppercase;letter-spacing:.05em}
td.actions{text-align:right}
.mono{font-family:var(--font-mono);font-size:.9rem}
.pill{display:inline-block;padding:.1rem .6rem;border-radius:999px;font-size:.8125rem;font-weight:600;
  border:1px solid var(--edge-strong);color:var(--text-muted)}
.pill--live{color:var(--text);border-color:var(--fault);background:var(--accent-soft)}
.pill--ok{color:var(--ok);border-color:var(--ok)}
.empty{color:var(--text-muted);padding:2rem 0;text-align:center}

/* theater */
main.theater{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:100%;max-width:none;padding:0;margin:0}
.stage{position:relative;flex:1 1 auto;width:100%;min-height:60vh;min-height:min(20rem,60dvh);background:#000;overflow:hidden}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.curtain{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;text-align:center;
  gap:.75rem;padding:1.5rem;background:var(--hero-gradient)}
.curtain h2{margin:0;font-size:1.5rem}
.curtain p{margin:0;color:var(--text-muted);max-width:34ch}
.curtain .spinner{width:1.75rem;height:1.75rem;border-radius:50%;border:3px solid var(--edge-strong);
  border-top-color:var(--accent);animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hud{position:absolute;top:calc(.6rem + var(--safe-top));left:.75rem;z-index:20;display:flex;flex-wrap:wrap;gap:.5rem;
  align-items:center;max-width:calc(100% - 1.5rem);padding:.35rem .8rem;border-radius:999px;
  background:rgba(23,17,12,.75);background:color-mix(in srgb,var(--bg) 60%,transparent);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid var(--edge);font-size:.875rem;color:var(--text)}
.hud .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--idle)}
.hud.is-live .dot{background:var(--fault);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%,100%{box-shadow:0 0 0 .5rem transparent}}
.hud .mode{font-size:.8125rem;letter-spacing:.04em;color:var(--text-muted)}

/* chat overlay: translucent, collapsible */
.overlay{position:absolute;right:calc(.75rem + var(--safe-right));bottom:calc(.75rem + var(--safe-bottom));z-index:30;
  width:min(380px,calc(100% - 1.5rem));display:flex;flex-direction:column;
  transition:opacity var(--dur-med) var(--ease),transform var(--dur-med) var(--ease),visibility var(--dur-med)}
.overlay.is-hidden{opacity:0;transform:translateY(.5rem);visibility:hidden;pointer-events:none}
.overlay__panel{background:rgba(23,17,12,.78);background:color-mix(in srgb,var(--bg) 55%,transparent);
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid var(--edge);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);overflow:hidden}
.overlay__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.15rem .5rem .15rem .9rem;
  border-bottom:1px solid var(--edge);font-family:var(--font-display);font-weight:600}
.overlay__toggle{border:1px solid var(--edge-strong);border-radius:999px;color:var(--text);padding:0 1rem}
.show-chat{position:absolute;right:calc(.75rem + var(--safe-right));bottom:calc(.75rem + var(--safe-bottom));z-index:30;
  border-radius:999px;background:var(--accent);color:var(--text-on-accent);border-color:transparent;box-shadow:var(--shadow-2)}
.viewers{display:flex;flex-wrap:wrap;gap:.35rem;padding:.5rem .8rem 0}
.viewer-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;color:var(--text-muted);
  background:rgba(255,235,200,.08);border-radius:999px;padding:.1rem .6rem}
.viewer-chip::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--dot,var(--accent))}
#chat-log{list-style:none;margin:0;padding:.6rem .8rem;max-height:min(30dvh,260px);overflow-y:auto;
  overscroll-behavior:contain;display:flex;flex-direction:column;gap:.4rem;
  scrollbar-width:thin;scrollbar-color:var(--edge-strong) transparent}
.msg{font-size:1rem;line-height:1.4;overflow-wrap:anywhere;padding:.25rem .6rem;border-radius:var(--radius-sm);
  background:rgba(0,0,0,.22);text-shadow:0 1px 2px rgba(0,0,0,.6);animation:rise var(--dur-med) var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
.msg__who{font-weight:700;color:var(--who,var(--accent-strong))}
.msg__body{color:var(--text)}
.msg--system{background:none;color:var(--text-muted);font-size:.9375rem;font-style:italic}
.msg--hidden{opacity:.4;text-decoration:line-through}
.reaction-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;padding:.4rem .6rem;border-top:1px solid var(--edge)}
.reaction-bar button{flex:1 1 var(--tap-min);max-width:3.5rem;min-width:var(--tap-min);min-height:var(--tap-min);
  border:0;border-radius:var(--radius-sm);background:rgba(255,235,200,.09);cursor:pointer;
  font-size:1.375rem;line-height:1;touch-action:manipulation;transition:transform var(--dur-fast) var(--ease)}
@media (hover:hover){.reaction-bar button:hover{background:var(--accent-soft)}}
.reaction-bar button:active{transform:scale(.9)}
.composer{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem .6rem;border-top:1px solid var(--edge)}
.composer input{flex:1 1 8rem;min-width:0;background:rgba(0,0,0,.3);border-radius:999px;padding:.5rem 1rem}
.composer button{border-radius:999px}
.composer__count{flex:0 0 100%;order:3;text-align:right;font-size:.8125rem;color:var(--text-muted)}
#reaction-field{position:absolute;inset:0;z-index:25;pointer-events:none;overflow:hidden}
.float-emoji{position:absolute;bottom:calc(6rem + var(--safe-bottom));font-size:2rem;will-change:transform,opacity;
  animation:floatUp var(--dur,3.4s) ease-out forwards;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.float-emoji small{display:block;font-size:.8125rem;text-align:center;margin-top:2px;color:#fff;opacity:.85;text-shadow:0 1px 3px #000}
@keyframes floatUp{0%{opacity:0;transform:translate(0,0) scale(.5)}12%{opacity:1;transform:translate(0,-24px) scale(1.15)}
  100%{opacity:0;transform:translate(var(--drift,30px),-58dvh) scale(.85)}}

/* replay */
.replay-stage{position:relative;background:#000;border-radius:var(--radius-md);overflow:hidden}
.replay-stage video{width:100%;display:block;max-height:70vh;max-height:70dvh;background:#000}
.replay-grid{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr) 20rem}
.replay-log{max-height:70dvh;overflow-y:auto}
.replay-log .msg{cursor:pointer}
.replay-log .msg.is-past{opacity:.5}
.replay-log .msg.is-now{opacity:1;background:var(--accent-soft)}
.stamp{color:var(--text-muted);font-size:.8125rem;font-variant-numeric:tabular-nums;margin-right:.4rem}

/* small screens */
@media (max-width:860px){.replay-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .overlay{left:calc(.5rem + var(--safe-left));right:calc(.5rem + var(--safe-right));width:auto}
  .topbar{padding-left:.75rem;padding-right:.75rem}
}
/* landscape phone: narrow side column, short log, film stays visible */
@media (max-height:500px) and (orientation:landscape){
  .overlay{left:auto;width:min(40vw,340px);right:calc(.5rem + var(--safe-right));bottom:calc(.5rem + var(--safe-bottom))}
  #chat-log{max-height:20dvh}
  .viewers{display:none}
}
@media (prefers-reduced-motion:reduce){
  .float-emoji{animation-duration:1.2s}
  .msg,.hud.is-live .dot{animation:none}
  .curtain .spinner{animation-duration:2.4s}
}