/* Lookout "porthole" nav chip - the site's main feature gets a bigger, glassy button you look *into*: Byte's
   conduit glyphs and sparkles twinkle behind the label (same palette as Lookout's own sky). Added 2026-10-18. */
a.bc-porthole { position: relative; overflow: hidden; isolation: isolate; z-index: 0; flex: none !important;
  padding: 9px 22px !important; font-size: 0.98rem !important; letter-spacing: 0.1em; text-transform: uppercase;
  color: #F2FFF6 !important; text-shadow: 0 0 6px rgba(0,0,0,.9), 0 1px 2px #000;
  border: 1px solid rgba(43,255,122,.75) !important; border-radius: 999px !important;
  background: rgba(4,12,8,.38) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 0 18px rgba(43,255,122,.28), 0 0 2px rgba(43,255,122,.9), inset 0 0 26px rgba(43,255,122,.10); }
a.bc-porthole:hover { box-shadow: 0 0 28px rgba(43,255,122,.45), 0 0 2px rgba(43,255,122,1), inset 0 0 30px rgba(43,255,122,.16); color: #fff !important; }
a.bc-porthole > canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
a.bc-porthole::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 50% 115%, rgba(43,255,122,.22), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.06), transparent 45%); }
a.bc-porthole .dot, a.bc-porthole > span:empty { display: none !important; }
@media (max-width: 520px) { a.bc-porthole { padding: 7px 16px !important; font-size: 0.86rem !important; } }
/* 2026-10-27 (Jeff: "fix the missing buttons at the top, on a desktop pc it's hard to navigate"): the all-porthole top bars
   were wider than the header and the overflow was cut off (Combine and the last chip hidden). Slightly smaller chips on
   desktop so the whole row fits, and the row wraps instead of hiding anything when it still doesn't. */
[data-porthole="all"] { flex-wrap: wrap !important; overflow: visible !important; row-gap: 8px; justify-content: center !important; }
[data-porthole="all"] > :first-child { margin-left: 0 !important; }
[data-porthole="all"] > :last-child { margin-right: 0 !important; }
@media (min-width: 521px) { [data-porthole="all"] a.bc-porthole { padding: 7px 15px !important; font-size: 0.8rem !important; letter-spacing: 0.07em; } }
/* 2026-10-27 (Jeff: "change the Lookout button to be a little bigger than the rest and add on it somehow '0 Fee Trading'"):
   in every all-porthole top bar the Lookout chip is a bit larger, brighter, with a small "0% COMMISSION TRADING" line under the label (was "0 FEE TRADING"; switched because auto-buys still pay the 0.0002 XRP anti-spam fee).
   The other chips stay their own height (align-items: center). */
[data-porthole="all"] { align-items: center !important; }
[data-porthole="all"] a.bc-porthole[href="/lookout/"] { flex-direction: column !important; justify-content: center; gap: 1px !important; line-height: 1.05;
  padding: 6px 22px 5px !important; font-size: 0.95rem !important; letter-spacing: 0.12em; border-width: 1.5px !important;
  box-shadow: 0 0 24px rgba(43,255,122,.4), 0 0 2px rgba(43,255,122,1), inset 0 0 26px rgba(43,255,122,.14); }
[data-porthole="all"] a.bc-porthole[href="/lookout/"]::before { content: "0% COMMISSION TRADING"; order: 2; font-size: 0.56rem; letter-spacing: 0.12em; font-weight: 800;
  color: #2BFF7A; text-shadow: 0 0 6px rgba(43,255,122,.7), 0 1px 2px #000; }
@media (max-width: 520px) { [data-porthole="all"] a.bc-porthole[href="/lookout/"] { padding: 5px 16px 4px !important; font-size: 0.86rem !important; } }
/* 2026-10-27 (Jeff: "give the buttons some contrast to the page so a little easier to see"): darker, near-solid fill, brighter
   border, a dark outline + drop shadow to lift them off the page, crisp white labels; the twinkle sky dimmed slightly. */
a.bc-porthole { background: rgba(2,9,5,.86) !important; border-color: rgba(70,255,140,.95) !important; color: #fff !important; text-shadow: 0 1px 2px #000 !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 2px 10px rgba(0,0,0,.7), 0 0 16px rgba(43,255,122,.32), inset 0 0 18px rgba(43,255,122,.10) !important; }
a.bc-porthole:hover { background: rgba(6,22,12,.92) !important; box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 26px rgba(43,255,122,.5), inset 0 0 22px rgba(43,255,122,.16) !important; }
a.bc-porthole > canvas { opacity: .75; }
/* 2026-11-01 (Jeff: "give firefinder its own top button" / "make firefinder button have firefinder graphics"): the Firefinder chip
   is orange and burning - Firefinder's flame band flickers along the bottom (embers from lookout-chip.js rise over it). */
a.bc-porthole.bc-fire { border-color: rgba(242,166,35,.95) !important; color: #FFF4E6 !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 2px 10px rgba(0,0,0,.7), 0 0 16px rgba(240,108,11,.45), inset 0 0 18px rgba(240,108,11,.14) !important; }
a.bc-porthole.bc-fire:hover { background: rgba(22,10,4,.92) !important; box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 26px rgba(240,108,11,.65), inset 0 0 22px rgba(240,108,11,.2) !important; }
a.bc-porthole.bc-fire::after { background: radial-gradient(ellipse 75% 85% at 50% 120%, rgba(240,108,11,.35), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.05), transparent 45%); }
a.bc-porthole.bc-fire > .bc-flames { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: url(/launches/flame-band.webp) center bottom / 150% 95% no-repeat; opacity: .6; transform-origin: 50% 100%;
  animation: bcFireFlick 1.1s ease-in-out infinite alternate; }
a.bc-porthole.bc-fire > canvas { opacity: .95; }
@keyframes bcFireFlick { from { transform: scaleY(.9); filter: brightness(.9); } to { transform: scaleY(1.06); filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { a.bc-porthole.bc-fire > .bc-flames { animation: none; } }