/* ══ OMENATI · the chrome ═════════════════════════════════════════════════════
   One bar for the whole site. Before this there were nine hand-written headers, no
   two carrying the same links, which is why nothing felt connected: the tab you used
   to get somewhere was gone when you arrived.

   Everything here is namespaced .omen-* on purpose. It is stamped into fourteen pages
   that each have their own stylesheet, and it must not collide with any of them.
   It reads the palette the pages already declare (--paper, --ink, --btc) so it looks
   native everywhere, including inside the mine, which uses the same paper palette.
   ═══════════════════════════════════════════════════════════════════════════════ */

.omen-bar{
  position:sticky; top:0; z-index:900;
  display:flex; align-items:center; gap:14px;
  height:44px; padding:0 14px;
  background:color-mix(in srgb, var(--paper,#F2EEE5) 88%, transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid color-mix(in srgb, var(--ink,#141414) 11%, transparent);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  /* installed to a home screen the notch eats the top - the mine already measures
     this, so borrow it and fall back to nothing in an ordinary tab */
  padding-top:var(--sat,0px); height:calc(44px + var(--sat,0px));
  transition:transform .28s ease;
}
/* the mine hides the bar the moment you start swinging, and gives it back on haul */
body.omen-nobar .omen-bar{ transform:translateY(-100%); }

.omen-mark{ display:flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--ink,#141414); flex:0 0 auto; }
.omen-mark img{ height:18px; width:auto; display:block }
.omen-mark span{ font-family:Inter,system-ui,sans-serif; font-size:13px;
  font-weight:500; letter-spacing:-.01em; white-space:nowrap }

.omen-tabs{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.omen-tabs a{
  text-decoration:none; color:var(--ink,#141414);
  font-size:10px; letter-spacing:.16em; opacity:.5;
  padding:7px 9px; border-radius:8px; white-space:nowrap;
  transition:opacity .15s, background .15s;
}
.omen-tabs a:hover{ opacity:.95; background:color-mix(in srgb, var(--ink,#141414) 6%, transparent) }
.omen-tabs a[aria-current="page"]{ opacity:1; background:color-mix(in srgb, var(--ink,#141414) 9%, transparent) }

/* DIG is the only filled thing on the bar. There is one act this site wants from a
   visitor and it should never be more than one tap away, from any page. */
.omen-tabs a.omen-dig{
  background:var(--btc,#F7931A); color:#141414; opacity:1;
  font-weight:500; letter-spacing:.14em; padding:7px 13px;
}
.omen-tabs a.omen-dig:hover{ background:var(--btc,#F7931A); filter:brightness(1.07) }
.omen-tabs a.omen-dig[aria-current="page"]{ box-shadow:inset 0 0 0 2px color-mix(in srgb,#141414 32%,transparent) }

/* ── the wallet chip ── */
.omen-chip{
  flex:0 0 auto; cursor:pointer; font:inherit; font-size:10px; letter-spacing:.14em;
  padding:7px 12px; border-radius:8px; white-space:nowrap;
  color:var(--ink,#141414); background:transparent;
  border:1.3px solid color-mix(in srgb, var(--ink,#141414) 26%, transparent);
  transition:border-color .15s, background .15s;
}
.omen-chip:hover{ border-color:color-mix(in srgb, var(--ink,#141414) 55%, transparent) }
.omen-chip.on{ border-color:color-mix(in srgb, var(--btc,#F7931A) 70%, transparent) }
.omen-chip.busy{ opacity:.6; cursor:progress }
/* once there is a bag worth banking and no wallet behind it, the chip asks */
.omen-chip.nag{ border-color:var(--btc,#F7931A); color:var(--btc,#F7931A);
  animation:omen-nag 1.6s ease-in-out 3 }
@keyframes omen-nag{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--btc,#F7931A) 45%,transparent) }
  50%{ box-shadow:0 0 0 5px transparent } }

/* ── the second level ──
   Three boards and three crew pages became two destinations without a single URL
   dying: they moved down here instead of being deleted. */
.omen-sub{
  position:sticky; top:calc(44px + var(--sat,0px)); z-index:899;
  display:flex; align-items:center; gap:2px; height:34px; padding:0 14px;
  background:color-mix(in srgb, var(--paper,#F2EEE5) 92%, transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid color-mix(in srgb, var(--ink,#141414) 8%, transparent);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  overflow-x:auto; scrollbar-width:none;
}
.omen-sub::-webkit-scrollbar{ display:none }
.omen-sub[hidden]{ display:none }
.omen-sub a{
  text-decoration:none; color:var(--ink,#141414); opacity:.45;
  font-size:9.5px; letter-spacing:.18em; padding:6px 10px; white-space:nowrap;
  border-bottom:1.6px solid transparent;
}
.omen-sub a:hover{ opacity:.85 }
.omen-sub a[aria-current="page"]{ opacity:1; border-bottom-color:var(--btc,#F7931A) }

/* ── the sheet the chip opens ──
   It opens in place. Every "Get Xverse" and "Get Phantom" button on the site used to
   throw you into a new tab; that guidance lives in here now and never navigates. */
.omen-veil{ position:fixed; inset:0; z-index:1000; background:rgba(10,10,10,.42);
  display:flex; align-items:flex-start; justify-content:center;
  padding:calc(58px + var(--sat,0px)) 16px 16px; }
.omen-veil[hidden]{ display:none }
.omen-sheet{
  width:min(340px,100%); background:var(--paper,#F2EEE5); color:var(--ink,#141414);
  border-radius:16px; padding:8px; box-shadow:0 20px 60px rgba(0,0,0,.3);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  animation:omen-rise .18s ease;
}
@keyframes omen-rise{ from{ opacity:0; transform:translateY(-8px) } }
.omen-sheet h3{ font-family:Inter,system-ui,sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.02em; opacity:.55; padding:10px 12px 8px; margin:0 }
.omen-sheet button, .omen-sheet a.omen-row{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  cursor:pointer; font:inherit; font-size:12px; letter-spacing:.01em; text-decoration:none;
  color:var(--ink,#141414); background:transparent; border:0; border-radius:11px;
  padding:12px; transition:background .13s;
}
.omen-sheet button:hover, .omen-sheet a.omen-row:hover{
  background:color-mix(in srgb, var(--ink,#141414) 7%, transparent) }
.omen-sheet .omen-ic{ width:26px; text-align:center; font-size:15px; flex:0 0 auto }
.omen-sheet .omen-sml{ display:block; font-size:10px; opacity:.5; letter-spacing:.02em; margin-top:3px }
.omen-sheet hr{ border:0; border-top:1px solid color-mix(in srgb,var(--ink,#141414) 10%,transparent);
  margin:6px 10px }
.omen-sheet .omen-say{ padding:10px 12px 12px; font-size:11px; line-height:1.6; opacity:.72 }
.omen-sheet .omen-say b{ color:var(--btc,#F7931A); font-weight:400 }
.omen-sheet .omen-code{ font-size:26px; letter-spacing:.22em; text-align:center;
  padding:14px 0 4px; color:var(--btc,#F7931A) }

/* ── the footer, the only inbound link the terms have ever needed ── */
.omen-foot{
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center;
  padding:38px 20px calc(30px + var(--sab,0px));
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; letter-spacing:.16em;
}
.omen-foot a{ color:var(--ink,#141414); opacity:.42; text-decoration:none }
.omen-foot a:hover{ opacity:.85 }

@media(max-width:560px){
  .omen-bar{ gap:8px; padding:0 10px }
  .omen-mark span{ display:none }
  .omen-tabs{ gap:1px }
  .omen-tabs a{ padding:7px 6px; letter-spacing:.1em }
  .omen-tabs a.omen-dig{ padding:7px 10px }
  .omen-chip{ padding:7px 9px; letter-spacing:.08em; max-width:38vw;
    overflow:hidden; text-overflow:ellipsis }
}
/* ── the narrow end ──
   Measured on the live site: at 320px the bar wanted 331px and pushed the whole page
   sideways with the chip hanging off the edge. A 320px phone is old but real, and a
   navigation you have to scroll horizontally to reach is not navigation. Everything here
   only tightens - all four tabs and the chip stay on screen, which is the point. */
@media(max-width:400px){
  .omen-bar{ gap:4px; padding:0 7px }
  .omen-tabs a{ padding:7px 4px; letter-spacing:.04em; font-size:9px }
  .omen-tabs a.omen-dig{ padding:7px 8px; letter-spacing:.04em }
  .omen-chip{ padding:7px 7px; letter-spacing:.02em; font-size:9px; max-width:31vw }
  .omen-sub{ padding:0 7px }
  .omen-sub a{ padding:6px 7px; letter-spacing:.1em }
}