/* ui-polish.css: one shared feel layer for the 2D app and the festival panels. Rules from Emil Kowalski's apple-design / emil-design-eng notes (read as reference, nothing installed).
   Additive only: it never changes layout, only press feedback, entrance motion, panel material and accessibility. Remove the <link> to switch it off. */
:root{ --r-control:8px; --r-card:12px; --r-panel:16px; --r-pill:999px; --blur-glass:blur(16px) saturate(180%); --glass-bg:rgba(8,14,22,.55); --glass-line:rgba(143,244,255,.28); --glass-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 50px rgba(0,0,0,.38); --f-body:'Inter',system-ui,-apple-system,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace; --f-title:'Unbounded',var(--f-body); --spectrum2:linear-gradient(110deg,#6fe1ff 0%,#c58bff 33%,#ff4fd8 66%,#ffd16f 90%,#6fe1ff 100%); --act:linear-gradient(120deg,#c58bff,#ff4fd8); --act-ink:#14041c; --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1); }

/* press feedback on touch-down, 100ms; zero-specificity transition so anything that sets its own keeps it */
:where(.pill,.loop-chip,.tab-btn,.channel-chip,.theme-btn,.btn,#hv-p .hb,#hv-p .hv-tab){ transition:transform 120ms var(--ease-out),background-color 150ms ease,border-color 150ms ease,opacity 150ms ease; }
:where(.pill,.loop-chip,.tab-btn,.channel-chip,.theme-btn,.btn,#hv-p .hb,#hv-p .hv-tab):active:not(:disabled){ transform:scale(.97); transition-duration:100ms; }

/* panels grow out of their corner: start at 95% and transparent, never from zero; ease-out, 200ms */
@keyframes uiPanelIn{ from{ opacity:0; transform:scale(.95); } to{ opacity:1; transform:none; } }
#hv-p{ transform-origin:100% 100%; animation:uiPanelIn 200ms var(--ease-out); }
#notif-panel{ transform-origin:100% 0; animation:uiPanelIn 160ms var(--ease-out); }

/* a visible ring for keyboard users, never for mouse clicks */
:where(button,a,select,textarea,input,[role=button]):focus-visible{ outline:2px solid rgba(143,244,255,.85); outline-offset:2px; }


/* ---- panel skin (design language v1, approved 2026-10-22): almost-clear liquid glass, an edge that shimmers through the spectrum, cut-corner buttons in the title font. No green in panels. ---- */
@keyframes uiShift{ to{ background-position:300% 0; } }
#ghost-chat-drawer,#hv-p{ background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.025) 60%)!important; border:0!important; border-radius:18px!important; -webkit-backdrop-filter:blur(7px) saturate(170%) brightness(1.08)!important; backdrop-filter:blur(7px) saturate(170%) brightness(1.08)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.06),0 20px 50px rgba(0,0,0,.45)!important; }
#ghost-chat-drawer::before,#hv-p::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:var(--spectrum2); background-size:300% 100%; animation:uiShift 7s linear infinite; -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); -webkit-mask-composite:xor; pointer-events:none; opacity:.85; z-index:4; }
#ghost-chat-drawer .ghost-chat-head{ font-family:var(--f-title); font-size:12px; letter-spacing:.06em; text-transform:uppercase; border-bottom-color:rgba(255,255,255,.12); }
#ghost-chat-drawer .ghost-chat-msg.ghost{ background:rgba(4,8,6,.5); }
#ghost-chat-drawer .ghost-chat-msg.me{ background:rgba(197,139,255,.3); border:1px solid rgba(197,139,255,.5); color:#fff; }
#ghost-chat-drawer .ghost-chat-input-row{ border-top-color:rgba(255,255,255,.12); }
#ghost-chat-drawer .ghost-chat-input-row input{ background:rgba(0,0,0,.3); border-color:rgba(255,255,255,.14); }
#ghost-chat-drawer .btn-primary{ background:var(--act); color:var(--act-ink); border:0; font-family:var(--f-title); font-weight:600; letter-spacing:.09em; clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px)); filter:drop-shadow(0 0 10px rgba(255,79,216,.45)); }
#hv-p .hb{ font-family:var(--f-title); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; border-radius:0; border-color:rgba(255,255,255,.18); background:rgba(0,0,0,.3); clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); }
#hv-p .hb.on,#hv-p .hb.go{ background:var(--act); color:var(--act-ink); border-color:transparent; }
@media (prefers-reduced-motion:reduce){ #ghost-chat-drawer::before,#hv-p::before{ animation:none; } }
@media (prefers-reduced-transparency:reduce){ #ghost-chat-drawer,#hv-p{ background:rgb(14,10,24)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } }

/* accessibility */
@media (prefers-reduced-motion:reduce){
  #hv-p,#notif-panel{ animation:none; }
  :where(.pill,.loop-chip,.tab-btn,.channel-chip,.theme-btn,.btn,#hv-p .hb,#hv-p .hv-tab):active:not(:disabled){ transform:none; }
}
@media (prefers-reduced-transparency:reduce){
  #hv-p,#gb-bubble{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
  #hv-p{ background:rgb(8,14,22)!important; }
}
@media (prefers-contrast:more){
  #hv-p{ background:rgb(8,14,22)!important; border-color:rgba(223,246,255,.8)!important; }
}

/* ---- sky background (worlds/sky-bg.js): the canvas sits behind everything; the old green body glow steps aside while it runs ---- */
html.sky-on body{ background:transparent; }
html.sky-on .topbar{ background:transparent!important; backdrop-filter:none; -webkit-backdrop-filter:none; border:0!important; box-shadow:none!important; } /* see-through header and nav (Barak 2026-10-25): each paints its own slice of the sky (worlds/sky-bg.js), so it looks clear but nothing scrolls visibly behind it */
html.sky-on .tabbar{ background:transparent!important; backdrop-filter:none; -webkit-backdrop-filter:none; border:0!important; box-shadow:none!important; }
html.in-fest 
/* ---- design language v1 rolled to the rest of the 2D app (2026-10-22): same glass, spectrum edge, cut-corner action buttons ---- */
#notif-panel{ position:absolute; background:linear-gradient(180deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.05) 28px,rgba(255,255,255,0) 90px),linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 60%),rgb(12,9,24)!important; border:0!important; border-radius:18px!important; -webkit-backdrop-filter:blur(22px) saturate(180%)!important; backdrop-filter:blur(22px) saturate(180%)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.5)!important; }
#notif-panel::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:var(--spectrum2); background-size:300% 100%; animation:uiShift 7s linear infinite; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); pointer-events:none; }
#notif-panel .notif-head.notif-head{ color:rgba(255,255,255,.85); font-family:var(--f-title); font-size:10.5px; letter-spacing:.1em; }
#msg-decide{ padding:10px 12px; border-radius:var(--r-card); background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); }
#msg-decide label{ font-family:var(--f-title); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
.intro-ans{ padding:10px 12px; border-radius:var(--r-card); background:linear-gradient(145deg,rgba(197,139,255,.14),rgba(255,79,216,.05)); border:1px solid rgba(197,139,255,.35); }
.intro-ans .loop-chip{ border-radius:0; font-family:var(--f-title); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px)); }
.intro-ans .loop-chip[data-ia="1"]{ background:var(--act); color:var(--act-ink); border-color:transparent; }
.btn.btn-primary,button.btn-primary,.btn-primary.btn-primary{ background:var(--act); color:var(--act-ink); border:0; border-radius:0; font-family:var(--f-title); font-size:11.5px; font-weight:600; letter-spacing:.07em; clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px)); }
@media (prefers-reduced-motion:reduce){ #notif-panel::before{ animation:none; } }
@media (prefers-reduced-transparency:reduce){ #notif-panel{ background:rgb(14,10,24)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } }
.msg-thread-input-row .btn.btn-primary{ background:var(--act)!important; border:0!important; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }

/* feed header: section label in the palette (was the old green), and a calmer "Live now" card */
html .eyebrow{color:#c58bff}
html .world-live .wl-txt b{font-weight:500;letter-spacing:.06em;font-size:10.5px;color:rgba(143,244,255,.78);text-shadow:none}
html .world-live .wl-title{font-weight:600;font-size:15px}
html .world-live .wl-orb{box-shadow:none;border-color:rgba(143,244,255,.22)}
html .world-live{border-color:rgba(197,139,255,.28);background:radial-gradient(120% 140% at 0% 0%,rgba(197,139,255,.10),transparent 55%),var(--surface)}
html .world-live:hover{border-color:rgba(255,79,216,.5)}

/* the app's main accent moves from the old green to the palette (violet), so every accent label, link and outline follows */
html:root{--accent:#c58bff;--accent-dim:#3b2a5c}
html .world-live .wl-go{background:var(--act);color:var(--act-ink);font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.06em}

/* "Live now" feed card, cleaner: quiet glass, sentence-case status line, one clear title, small cut-corner Enter */
html .world-live{padding:14px 14px 14px 16px;gap:12px;border-radius:18px;border:1px solid rgba(197,139,255,.22);background:linear-gradient(135deg,rgba(197,139,255,.10),rgba(255,79,216,.05) 60%,transparent),rgba(12,9,24,.62);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
html .world-live .wl-txt{gap:3px}
html .world-live .wl-txt b{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:rgba(160,231,245,.85)}
html .world-live .wl-dot{width:6px;height:6px;background:#ff4fd8;box-shadow:none}
html .world-live .wl-title{font-size:15px;font-weight:600;color:#fff}
html .world-live .wl-stats{font-size:12.5px;line-height:1.35;opacity:.6;margin-top:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html .world-live .wl-go{border-radius:0;padding:9px 14px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
html .world-live .wl-go svg{width:14px;height:14px}

/* admin: the DECIDE / GHOST / ME group labels looked like tabs you could press; hidden until they are clearer */
#ad-ov .tg{display:none}
html .world-live .wl-txt b[hidden]{display:none}

/* ---- see-through boxes (Barak 2026-10-25): posts, the type box and cards keep their frame but drop the grey fill, so the moving sky shows through ---- */
html.sky-on .feed-item, html.sky-on .feed-composer, html.sky-on .feed-composer textarea, html.sky-on .feed-composer-select, html.sky-on .nd-card, html.sky-on .mv-card{ background:transparent!important; }
html.sky-on .feed-item, html.sky-on .feed-composer, html.sky-on .nd-card, html.sky-on .mv-card{ border-color:rgba(255,255,255,.16)!important; }