/* JICHO look: dark navy + giraffe gold (Bingo's approved Home Feed and Cockpit look), loaded after
   every other stylesheet. Covers the header, the bottom bar, the Home Feed (public/home-feed.js),
   the Cockpit (public/cockpit.js) and the site's accent colours. Content pages keep their light
   backgrounds with gold/orange accents; LIVE Studio keeps its own stage design. */
:root{
  --jc-navy:#050b14;--jc-navy2:#0a1526;--jc-panel:#0b1628;--jc-gold:#f3be2b;--jc-gold-soft:rgba(243,190,43,.45);
  --jc-orange:#e8731a;--jc-brown:#5a2a0c;--jc-red:#ef1f2f;--jc-text:#f8faff;--jc-dim:rgba(255,255,255,.66);
  /* the site's existing accent variables, now giraffe gold/brown instead of pink/wine */
  --wine:#0a1526;--burgundy:#b45309;--pink:#f59e0b;--gold:#f3d58a;--line:#eadfc6;--rose:#fff8ea;--red:#c2410c;--green:#9a5b13;--ink:#1d1a16;--muted:#6f6556;
  --wl-pink:#b45309;--wl-hot:#e8731a;--wl-line:#eee4cf;--pf-pink:#b45309;--pf-hot:#e8731a;--pf-line:#efe5cf;--pf-soft:#fff8ea;
  --mr-berry:#b45309;--mr-magenta:#d97706;--mr-ink:#3b2a14;
}
html{background:var(--jc-navy)}
body{background:#f6f2ea}

/* ---- header: JICHO logo (opens the Cockpit) on dark navy ---- */
.app>header{background:linear-gradient(180deg,#0a1526,#050b14)!important;border-bottom:1px solid rgba(243,190,43,.28)!important;box-shadow:0 2px 14px rgba(0,0,0,.35)!important}
.app>header+div[aria-hidden="true"]{background:linear-gradient(90deg,#5a2a0c,#e8731a,#f3be2b,#e8731a,#5a2a0c)!important;height:3px!important}
#brandHome{background:none!important;border:0!important;padding:0!important;box-shadow:none!important;display:flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
#brandHome:active{transform:scale(.97)}
#brandHome:focus-visible{outline:2px solid var(--jc-gold);outline-offset:3px;border-radius:10px}
/* The header shows the eye alone, large: it may reach past the header's bottom edge. */
#brandHome{position:relative;z-index:5}
#brandHome .jc-header-eye{width:124px;margin-block:-10px -16px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))}
@media(max-width:600px){#brandHome .jc-header-eye{width:104px;margin-block:-8px -14px}}
.app>header .icon-btn{background:var(--jc-panel)!important;color:var(--jc-text)!important;border:1px solid rgba(243,190,43,.6)!important;box-shadow:0 0 9px rgba(243,190,43,.22)!important}
.app>header .icon-btn:hover{background:rgba(243,190,43,.14)!important}
#inboxBadge:not(:empty){background:var(--jc-red)!important;color:#fff!important}

/* ---- bottom bar (not on the Home Feed: there the Cockpit is the menu, as in Bingo) ---- */
.bottom-nav{background:linear-gradient(180deg,#0a1526,#050b14)!important;border-top:1px solid rgba(243,190,43,.35)!important;box-shadow:0 -6px 24px rgba(0,0,0,.35)!important}
.bottom-nav .nav-item{color:#d7dde8!important}
.bottom-nav .nav-item.active{color:#1a1206!important;background:linear-gradient(180deg,#f3be2b,#d98a0b)!important;border-color:#f3be2b!important}
body.jf-mode .bottom-nav{display:none!important}
body.jf-mode main{padding-bottom:0!important;min-height:0!important}
body.jf-mode .app{min-height:0!important}
body.jf-mode{overflow:hidden;background:var(--jc-navy)}

/* ---- accents on the light pages ---- */
.btn-primary{background:linear-gradient(180deg,#f3be2b,#d98a0b)!important;color:#1a1206!important;border-color:#d98a0b!important}
.btn-outline{color:#9a5b13!important;border-color:#d9a441!important}
h1,h2{color:#1d1a16}

/* ---- Home Feed ---- */
#feedView{position:relative;background:#000;color:#fff;height:var(--jf-h,calc(100dvh - 64px));overflow:hidden}
#feedView.active{display:block}
.jf-top{position:absolute;top:8px;left:8px;right:8px;z-index:5;display:flex;align-items:center;gap:8px;pointer-events:none}
.jf-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px;border-radius:14px;background:rgba(5,11,20,.55);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto;flex:1 1 auto;min-width:0}
.jf-tabs::-webkit-scrollbar{display:none}
.jf-tabs button,.jf-sound{flex:0 0 auto;min-height:36px;padding:6px 12px;border-radius:10px;border:1px solid rgba(243,190,43,.6);background:rgba(11,22,40,.92);color:var(--jc-text);font:800 13px/1.1 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 0 9px rgba(243,190,43,.22);white-space:nowrap}
.jf-tabs button.active{background:linear-gradient(180deg,rgba(243,190,43,.38),rgba(243,190,43,.14));border-color:var(--jc-gold);box-shadow:0 0 14px rgba(243,190,43,.45)}
.jf-sound{pointer-events:auto;font-size:18px;padding:6px 10px}
@media(max-width:420px){.jf-tabs{gap:4px;padding:3px}.jf-tabs button{padding:6px 9px;font-size:12px;min-height:34px}.jf-sound{min-height:38px;padding:5px 9px}}
.jf-tabs button:focus-visible,.jf-sound:focus-visible,.jf-rail button:focus-visible,.jf-who:focus-visible{outline:2px solid var(--jc-gold);outline-offset:2px}
.jf-feed{position:absolute;inset:0;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:none;outline:0}
.jf-feed::-webkit-scrollbar{display:none}
.jf-item{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#050505}
.jf-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* one original picture, filling the area, centred, never stretched (Bingo's video decision) */
.jf-stage{background:#0a1526}
/* Portrait pictures fill the screen (centred, never stretched); landscape and square ones show whole,
   at their own proportions, on a background matched to their edges (home-feed.js). */
.jf-stage .jf-media,.jf-stage video{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:transparent}
.jf-stage .jf-media.jf-fill{object-fit:cover}
.jf-backdrop{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);filter:blur(28px) brightness(.5) saturate(1.15);pointer-events:none}
.jf-stage>.jf-media,.jf-stage>video{position:relative}
.jf-stage>.jf-photos{z-index:1}
@media(prefers-reduced-transparency:reduce){.jf-backdrop{filter:brightness(.35)}}
.jf-photos{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x pan-y}
.jf-photos::-webkit-scrollbar{display:none}
.jf-photos .jf-media{flex:0 0 100%;scroll-snap-align:center}
.jf-count{position:absolute;top:64px;right:12px;z-index:3;font:800 12px Inter,system-ui,sans-serif;padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff}
.jf-textcard{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:84px 74px 120px 22px;background:radial-gradient(circle at 30% 20%,#3a2207,#0a1526 55%,#050b14)}
.jf-textcard p{margin:0;font:800 clamp(20px,6vw,30px)/1.3 Inter,system-ui,sans-serif;color:#fff;text-align:center;overflow-wrap:anywhere;max-height:100%;overflow:hidden}
.jf-shade{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.25) 55%,transparent);pointer-events:none}
.jf-info{position:absolute;left:12px;right:84px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:2;display:grid;gap:6px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.jf-who{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font:900 16px/1.2 Inter,system-ui,sans-serif;color:#fff}
.jf-who:disabled{cursor:default}
.jf-who time{font:600 12px Inter,system-ui,sans-serif;color:#e5e7eb}
.jf-tick{color:var(--jc-gold);font-size:13px}
.jf-text{font:500 14px/1.4 Inter,system-ui,sans-serif;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.jf-meta,.jf-sharedtag{font:600 13px Inter,system-ui,sans-serif;color:#f3f4f6}
.jf-song{font:700 13px Inter,system-ui,sans-serif;color:#fde68a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jf-rail{position:absolute;right:6px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px}
/* the creator: a small round picture right before the name, one row; both open the same profile */
.jf-by{display:flex;align-items:center;gap:8px;min-width:0}
.jf-by-ava{position:relative;flex:none}
.jf-ava-btn{all:unset;cursor:pointer;display:block;border-radius:50%}
.jf-ava-btn:disabled{cursor:default}
.jf-ava-btn:focus-visible{outline:2px solid var(--jc-gold);outline-offset:2px}
.jf-by .jf-who{min-width:0}
.jf-by .jf-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.jf-by .jf-ava{width:34px;height:34px;font-size:14px;border-width:1.5px}
.jf-by .jf-follow{left:auto;right:-5px;bottom:-4px;transform:none;width:17px;height:17px;font-size:12px;line-height:17px}
.jf-ava{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid var(--jc-gold);background:#3a2207;color:#fff;font:900 18px Inter,system-ui,sans-serif}
.jf-ava img{width:100%;height:100%;object-fit:cover}
.jf-follow{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;border:0;background:var(--jc-red);color:#fff;font:900 15px/22px Inter,system-ui,sans-serif;padding:0;cursor:pointer}
.jf-follow.on{background:var(--jc-gold);color:#1a1206;font-size:12px}
.jf-act{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:50px;min-height:46px;padding:3px 2px;border:0;background:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.jf-act span{font:800 11.5px/1.1 Inter,system-ui,sans-serif}
.jf-act.on{color:var(--jc-gold)}
.jf-act svg{width:26px;height:26px}
@media(max-height:640px){.jf-rail{gap:0}.jf-act{min-height:44px;font-size:21px}.jf-act svg{width:23px;height:23px}}
.jf-wa svg{background:#25d366;border-radius:50%;padding:4px}
.jf-paused{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:900 46px Inter,system-ui,sans-serif;color:rgba(255,255,255,.88);text-shadow:0 2px 12px rgba(0,0,0,.6);pointer-events:none;z-index:2}
.jf-empty{height:100%;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;padding:24px;text-align:center;color:#d7dde8;font:600 16px Inter,system-ui,sans-serif}
.jf-btn{min-height:42px;padding:8px 18px;border-radius:12px;border:1px solid var(--jc-gold);background:linear-gradient(180deg,#f3be2b,#d98a0b);color:#1a1206;font:900 14px Inter,system-ui,sans-serif;cursor:pointer}
@media(min-width:760px){
  #feedView{background:radial-gradient(circle at 50% 30%,#13213a,#050b14 70%)}
  .jf-feed{left:50%;right:auto;width:min(480px,100%);transform:translateX(-50%);border-left:1px solid rgba(243,190,43,.18);border-right:1px solid rgba(243,190,43,.18)}
  .jf-top{left:50%;right:auto;width:min(464px,calc(100% - 16px));transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){.jf-feed{scroll-behavior:auto}}

/* ---- Cockpit (Bingo's approved Cockpit look) ---- */
.jcp-wrap{position:fixed;inset:0;z-index:2147483200;background:rgba(2,5,10,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .18s ease;display:flex;align-items:center;justify-content:center;padding:12px}
.jcp-wrap.open{opacity:1}
.jcp-wrap[hidden]{display:none}
.jcp-panel{position:relative;width:calc(100vw - 24px);max-width:460px;max-height:min(88vh,760px);border-radius:22px;border:1.5px solid rgba(243,190,43,.55);background:linear-gradient(180deg,rgba(9,17,30,.99),rgba(3,7,14,.996));-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 0 0 1px rgba(243,190,43,.12),0 0 26px rgba(243,190,43,.16),0 24px 60px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column;transform:translateY(10px) scale(.98);transition:transform .2s ease;font-family:Inter,Arial,sans-serif;color:var(--jc-text)}
.jcp-wrap.open .jcp-panel{transform:none}
.jcp-panel *{box-sizing:border-box}
.jcp-shell{display:flex;flex-direction:column;min-height:0;max-height:min(88vh,760px)}
.jcp-header{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 56px 12px;flex:0 0 auto;border-bottom:1px solid rgba(243,190,43,.22)}
.jcp-back,.jcp-close{position:absolute;top:14px;width:36px;height:36px;border-radius:10px;border:1px solid rgba(243,190,43,.8);background:#0b1628;color:var(--jc-text);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 0 9px rgba(243,190,43,.3)}
.jcp-back{left:12px;font-size:24px}.jcp-close{right:12px}
.jcp-back:hover,.jcp-close:hover{background:rgba(243,190,43,.14)}
.jcp-back:active,.jcp-close:active{transform:translateY(1px) scale(.96)}
.jcp-header-brand{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.jcp-header-brand .jcp-header-eye{width:112px;margin-block:-6px}
.jcp-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:14px 14px 18px;display:flex;flex-direction:column;gap:16px}
.jcp-section-label{margin:0 0 8px 2px;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--jc-gold)}
.jcp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:380px){.jcp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:300px){.jcp-grid{grid-template-columns:minmax(0,1fr)}}
.jcp-btn{--tab-rgb:243,190,43;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;padding:10px 6px;border-radius:10px;border:1px solid rgba(var(--tab-rgb),.8);background:#0b1628;color:var(--jc-text);font:850 11.5px/1.15 Inter,Arial,sans-serif;text-align:center;cursor:pointer;white-space:normal;overflow-wrap:anywhere;overflow:hidden;box-shadow:0 0 9px rgba(var(--tab-rgb),.3);transition:background .12s ease,box-shadow .12s ease}
.jcp-btn b{font-weight:850}
.jcp-btn small{display:block;font-weight:400;font-size:9.5px;opacity:.75;line-height:1.25}
.jcp-ico{font-size:19px;line-height:1}
.jcp-btn:hover{background:rgba(var(--tab-rgb),.10)}
.jcp-btn:active{transform:translateY(1px) scale(.98)}
.jcp-btn:focus-visible,.jcp-back:focus-visible,.jcp-close:focus-visible,.jcp-close-footer:focus-visible{outline:2px solid var(--jc-gold);outline-offset:2px}
.jcp-btn.btn-blue{--tab-rgb:18,170,255}.jcp-btn.btn-glass{--tab-rgb:120,170,255;border-color:rgba(120,170,255,.38);background:transparent}
.jcp-btn.btn-publish{--tab-rgb:255,47,176}.jcp-btn.btn-red{--tab-rgb:239,31,47}.jcp-btn.btn-purple{--tab-rgb:171,71,255}.jcp-btn.btn-gold{--tab-rgb:243,190,43}
.jcp-btn.active{background:linear-gradient(180deg,rgba(var(--tab-rgb),.38),rgba(var(--tab-rgb),.16));border-color:rgb(var(--tab-rgb));color:#fff;box-shadow:0 0 12px rgba(var(--tab-rgb),.55)}
.jcp-btn-danger{--tab-rgb:239,31,47;border-color:rgba(239,31,47,.65);color:#ff8b93}
.jcp-btn-danger:hover{background:rgba(239,31,47,.14)}
.jcp-badge{position:absolute;top:4px;right:8px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--jc-red);color:#fff;font-size:9px;font-weight:900;font-style:normal;display:flex;align-items:center;justify-content:center}
.jcp-close-footer{flex:0 0 auto;margin:4px 14px 14px;min-height:44px;border-radius:10px;border:1px solid rgba(243,190,43,.8);background:#0b1628;color:var(--jc-text);font:800 12px Inter,Arial,sans-serif;letter-spacing:.04em;cursor:pointer;box-shadow:0 0 9px rgba(243,190,43,.3)}
.jcp-close-footer:hover{background:rgba(243,190,43,.10)}
@media(max-height:640px){.jcp-panel,.jcp-shell{max-height:94vh}.jcp-header{padding-top:10px;padding-bottom:8px}.jcp-body{padding-top:10px;gap:12px}}
@media(prefers-reduced-motion:reduce){.jcp-wrap,.jcp-panel{transition:none}}
body.jcp-open{overflow:hidden}

/* ---- full-screen video (public/fullscreen.js) ---- */
.jf-stage,.wl-vid{--jfs-r:.5625}
.jfs-open{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(10,21,38,.72);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.jfs-open svg{width:16px;height:16px}
.jfs-open:focus-visible{outline:2px solid var(--jc-gold);outline-offset:2px}
.jf-stage{container-type:size}
.jf-stage>.jfs-open{left:50%;transform:translateX(-50%);top:calc(50% + min(100cqw * var(--jfs-r), 100cqh) / 2 + 10px)}
@supports not (top:1cqw){.jf-stage>.jfs-open{top:auto;bottom:calc(150px + env(safe-area-inset-bottom))}}
.wl-vid>.jfs-open{left:8px;bottom:8px;min-height:32px;font-size:12px;padding:0 10px}
.jfs-holder{display:none}
body.jfs-active{overflow:hidden}
.jfs{position:fixed;inset:0;z-index:2147483000;background:#000;color:#fff;display:block;touch-action:none}
.jfs-stage{position:absolute;inset:0;display:grid;place-items:center}
.jfs-stage video{width:100%!important;height:100%!important;max-width:100%;max-height:100%;object-fit:contain!important;background:#000;position:static!important;transform:none!important}
.jfs-top,.jfs-bar{position:absolute;left:0;right:0;display:flex;align-items:center;gap:10px;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));opacity:0;transition:opacity .2s;pointer-events:none}
.jfs.show .jfs-top,.jfs.show .jfs-bar,.jfs.paused .jfs-top,.jfs.paused .jfs-bar,.jfs:focus-within .jfs-top,.jfs:focus-within .jfs-bar{opacity:1;pointer-events:auto}
.jfs-top{top:0;justify-content:flex-end;padding-top:max(10px,env(safe-area-inset-top));background:linear-gradient(#000a,#0000)}
.jfs-bar{bottom:0;padding-bottom:max(12px,env(safe-area-inset-bottom));background:linear-gradient(#0000,#000c)}
.jfs-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 10px;border:0;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.jfs-btn svg{width:22px;height:22px}
.jfs-btn:focus-visible,.jfs input:focus-visible{outline:2px solid var(--jc-gold);outline-offset:2px}
.jfs-exit{background:rgba(243,190,43,.92);color:#1a1206}
.jfs-time{font-variant-numeric:tabular-nums;font-size:13px;min-width:38px;text-align:center}
.jfs-seek{flex:1;min-width:60px;accent-color:var(--jc-gold);height:28px}
.jfs-vol{width:90px;accent-color:var(--jc-gold)}
@media(max-width:480px){.jfs-vol{display:none}}
@media(prefers-reduced-motion:reduce){.jfs-top,.jfs-bar{transition:none}}

/* ---- JICHO LIVE invitation (public/live-invite.js) ---- */
.jli-wrap{position:fixed;inset:0;z-index:2000;display:grid;place-items:end center;background:rgba(5,11,20,0);transition:background .25s;padding:0 0 env(safe-area-inset-bottom)}
.jli-wrap.open{background:rgba(5,11,20,.72)}
.jli{position:relative;width:min(100%,420px);box-sizing:border-box;margin:0 auto;padding:18px 18px 16px;border-radius:24px 24px 0 0;background:linear-gradient(180deg,#0b1628,#050b14);color:#f8faff;border:1px solid rgba(243,190,43,.45);border-bottom:0;box-shadow:0 -10px 40px rgba(0,0,0,.5);transform:translateY(30px);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s;text-align:center}
.jli-wrap.open .jli{transform:none;opacity:1}
@media(min-width:640px){.jli-wrap{place-items:center}.jli{border-radius:24px;border-bottom:1px solid rgba(243,190,43,.45)}}
.jli-art{display:block;width:100%;height:auto;border-radius:18px}
.jli h2{margin:14px 0 6px;font-size:22px;line-height:1.2;color:#f3be2b}
.jli p{margin:0;color:rgba(255,255,255,.82);font-size:15px;line-height:1.45}
.jli .jli-small{margin-top:10px;font-size:12.5px;color:rgba(255,255,255,.6)}
.jli-acts{display:flex;gap:10px;margin-top:16px}
.jli-btn{flex:1;min-height:50px;border-radius:14px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:inherit;font-size:16px;font-weight:800;cursor:pointer}
.jli-btn.gold{background:linear-gradient(180deg,#f3be2b,#d98a0b);border-color:#d98a0b;color:#1a1206}
.jli-btn:focus-visible,.jli-x:focus-visible{outline:3px solid #fff;outline-offset:2px}
.jli-x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:24px;cursor:pointer;z-index:1}
@media(prefers-reduced-motion:reduce){.jli,.jli-wrap{transition:none}}
#heroLogoStage{aspect-ratio:780/408!important}
#heroLogoStage .hero-eye{width:100%}

/* ---- Home Feed: Crown and Save states, creator picture fallback, small screens ---- */
.jf-ava{position:relative}
.jf-ava>i{font-style:normal;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.jf-ava>img{position:relative;z-index:1}
.jf-act.busy{opacity:.7;cursor:progress}
.jf-act.busy::after{content:"";position:absolute;width:30px;height:30px;margin-top:-2px;border-radius:50%;border:2.5px solid rgba(255,255,255,.25);border-top-color:var(--jc-gold);animation:jfSpin .8s linear infinite}
.jf-act{position:relative}
.jf-act.pop{animation:jfPop .32s ease-out}
.jf-act.jf-crown.on{color:var(--jc-gold)}
.jf-act.jf-crown.on span{color:var(--jc-gold)}
@keyframes jfSpin{to{transform:rotate(360deg)}}
@keyframes jfPop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.jf-act.pop{animation:none}.jf-act.busy::after{animation-duration:2s}}
.jf-err{position:absolute;z-index:6;left:12px;right:72px;bottom:calc(120px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 10px;border-radius:12px;background:rgba(127,18,18,.94);color:#fff;font:600 13.5px/1.35 Inter,system-ui,sans-serif;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.jf-err span{flex:1 1 160px;min-width:0}
.jf-err button{border:0;border-radius:9px;min-height:36px;padding:0 12px;font:800 13px Inter,system-ui,sans-serif;cursor:pointer}
.jf-err [data-act="retry"]{background:#fff;color:#7f1212}
.jf-err .jf-err-x{background:transparent;color:#fff;font-size:20px;padding:0 8px}
/* Never under the phone's own bars; long names and captions wrap or scroll inside their area. */
.jf-info{left:max(12px,env(safe-area-inset-left));max-height:calc(100% - 150px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.jf-info::-webkit-scrollbar{display:none}
.jf-rail{right:max(6px,env(safe-area-inset-right));max-height:calc(100% - 96px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.jf-rail::-webkit-scrollbar{display:none}
.jf-by .jf-who{flex:1 1 auto}
.jf-by .jf-who{flex-wrap:nowrap}
.jf-by .jf-who b{display:block;min-width:0;flex:0 1 auto}
.jf-by .jf-who time,.jf-by .jf-tick{flex:none}
/* A long text post scrolls inside its card instead of being cut off mid-line. */
.jf-textcard{padding-top:max(84px,calc(64px + env(safe-area-inset-top)))}
.jf-textcard p{overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin;max-height:100%;-webkit-mask-image:linear-gradient(#000 calc(100% - 14px),transparent);mask-image:linear-gradient(#000 calc(100% - 14px),transparent);padding-bottom:12px}

/* ---- The eye and its "Press here" tab (as Bingo's floating logo and its "Press here" pill) ----
   The tab sits right against the eye on every page, in Bingo's pill colours, and keeps reminding
   people that the eye opens the Cockpit: 👈 flashes twice, then "Press here" flashes twice, repeating
   (4 s), with gentle fades. The pill is one fixed box, so switching never moves the header. It is
   part of the eye's button: the finger, the words and the eye all open the Cockpit, and the whole
   area stays tappable while the words are faded. On the Home Feed the eye with its tab can float
   and be dragged like Bingo's logo; its × puts it back in its place, top left (public/eye-float.js). */
.jc-logo-stack{position:relative;display:flex;align-items:center;flex:none;--eye-w:124px;will-change:transform}
#brandHome .jc-header-eye{flex:none}
#brandHome .jc-hint{position:relative;flex:none;display:block;width:82px;height:26px;margin-left:-10px;border-radius:999px;background:linear-gradient(135deg,#ff2fb0,#22c9ff);box-shadow:0 6px 16px rgba(0,0,0,.4);pointer-events:none}
#brandHome .jc-hint>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;white-space:nowrap;animation:jcHintFinger 4s ease-in-out infinite;will-change:opacity}
#brandHome .jc-hint>.jc-hint-finger{font-size:17px;line-height:1;justify-content:flex-start;padding-left:12px}
#brandHome .jc-hint-press{font:900 11px/1 Inter,system-ui,sans-serif;letter-spacing:.02em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.6);animation-name:jcHintPress!important}
@keyframes jcHintFinger{0%{opacity:0}9%{opacity:1}19%{opacity:.25}31%{opacity:1}44%,100%{opacity:0}}
@keyframes jcHintPress{0%,50%{opacity:0}59%{opacity:1}69%{opacity:.25}81%{opacity:1}94%,100%{opacity:0}}
@media(max-width:600px){.jc-logo-stack{--eye-w:104px}}
#brandHome .jc-hint .jc-hint-here{color:inherit}
@media(max-width:379px){#brandHome .jc-hint{width:50px}#brandHome .jc-hint .jc-hint-here{display:none}}
html.jl-hidden #brandHome .jc-hint>span{animation-play-state:paused}
html.jl-hold-header #brandHome .jc-hint{opacity:0}
#brandHome .jc-hint{transition:opacity .45s ease}
@media(prefers-reduced-motion:reduce){#brandHome .jc-hint>span{animation:none!important}#brandHome .jc-hint>.jc-hint-finger{opacity:0}#brandHome .jc-hint>.jc-hint-press{opacity:1}}
/* The × (Bingo's): a dark circle with a gold border at the eye's top-right corner, 32 px to tap.
   Shown only while the eye is away from its place. */
.jc-logo-x{position:absolute;top:-8px;left:calc(var(--eye-w) - 26px);z-index:6;width:32px;height:32px;padding:0;margin:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:scale(.7);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.jc-logo-x.show{opacity:1;visibility:visible;transform:scale(1)}
.jc-logo-x span{width:22px;height:22px;border-radius:50%;background:#0d172a;border:1.5px solid #f5b91e;color:#fff;font:900 13px/1 system-ui,sans-serif;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.jc-logo-x:focus-visible{outline:2px solid #f5b91e;outline-offset:2px;border-radius:50%}
/* Floating on the Home Feed: the eye can be dragged; while dragging it lifts a little. */
.jc-logo-stack.jc-float #brandHome{touch-action:none}
.jc-logo-stack.jc-dragging{filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
/* The narrowest phones (320 px): a little less space around the controls and a slightly smaller
   eye, so the eye, its tab and Search, Inbox and Account all fit without overlapping. */
@media(max-width:340px){.app>header{padding-inline:10px!important}.app>header .head-actions{gap:6px!important}.jc-logo-stack{--eye-w:90px}#brandHome .jc-header-eye{width:90px}#brandHome .jc-hint{width:42px;height:24px;margin-left:-10px}#brandHome .jc-hint-press{font-size:10px}#brandHome .jc-hint>.jc-hint-finger{font-size:15px;padding-left:10px}}
/* On phones the unread count sits on the Inbox button's corner instead of widening it, so a new
   message never pushes the header controls into each other. */
@media(max-width:600px){#inboxTop{position:relative}#inboxBadge:not(:empty){position:absolute;top:-7px;right:-7px;margin:0;line-height:16px;box-shadow:0 0 0 2px #050b14}}