/* ════════════════════════════════════════════════════════════════
   Brutalist nav bar for the canvas art scenes (ocean/cozy/cats).
   Same anatomy as the document pages' bar, but translucent black so
   the pixel-art scene stays visible behind it. Loaded after each
   scene's own CSS.
   ════════════════════════════════════════════════════════════════ */
.tab-nav{
  position:fixed !important; top:0 !important; left:0 !important; right:0 !important;
  transform:none !important; width:100% !important; max-width:none !important;
  border:none !important; border-bottom:2px solid rgba(242,242,242,.85) !important;
  background:rgba(5,5,5,.62) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-radius:0 !important;
  display:flex !important; justify-content:center !important; align-items:center !important;
  gap:1.4rem !important; padding:.85rem 1.4rem !important; z-index:30 !important;
}
.tab-nav a{
  background:none !important; border-radius:0 !important; padding:.2rem .1rem !important;
  color:rgba(220,220,220,.8) !important; font-size:.66rem !important;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Courier New',monospace !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  text-shadow:none !important; position:relative; cursor:pointer !important;
}
.tab-nav a:hover{ color:#fff !important; text-decoration:underline !important; text-decoration-thickness:2px !important; }
.tab-nav a.active{ background:#f2f2f2 !important; color:#0a0a0a !important; padding:.2rem .45rem !important; }
.tab-nav a.active::after{ display:none !important; }
@media(max-width:760px){ .tab-nav{ gap:.9rem !important; padding:.7rem 1rem !important; } }
@media(max-width:560px){ .tab-nav a{ font-size:.56rem !important; letter-spacing:.02em !important; } }

/* the scenes' top-left "back" control: square block, no pill */
.backlink{
  top:.72rem !important; left:1.2rem !important;
  padding:.32rem .6rem !important; border:2px solid rgba(242,242,242,.85) !important;
  background:rgba(5,5,5,.62) !important; border-radius:0 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  color:rgba(235,235,235,.9) !important; cursor:pointer !important;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Courier New',monospace !important;
  font-size:.6rem !important; letter-spacing:.06em !important; text-transform:uppercase !important;
  text-shadow:none !important; transform:none !important;
}
.backlink:hover{ background:#f2f2f2 !important; color:#0a0a0a !important; transform:none !important; }
.tab-nav a, .backlink{ cursor:pointer !important; }


/* ── scene HUD: solid blocks, mono, no glass ──────────────────────
   The scenes keep their own colours on the canvas; everything laid
   over the art becomes a hard-edged black block so it stays legible
   without shadows or blur. */
.caption, .nowplaying, .toast, .wx-panel, .legal, .corner{
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Courier New',monospace !important;
  text-shadow:none !important; border-radius:0 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.caption{
  background:rgba(5,5,5,.72); border:2px solid rgba(242,242,242,.85);
  padding:.55rem .7rem; gap:.15rem !important;
}
.cap-kanji{ font-size:1.15rem !important; letter-spacing:.02em !important; color:#f2f2f2 !important; }
.cap-title{ font-size:.62rem !important; letter-spacing:.06em !important; color:#f2f2f2 !important; font-weight:700; }
.cap-hint{ font-size:.56rem !important; letter-spacing:.06em !important; color:#9b9b9b !important; margin-top:.15rem !important; }
.cap-hint::before{
  content:'// ' !important; width:auto !important; height:auto !important;
  background:none !important; box-shadow:none !important; animation:none !important;
  border-radius:0 !important; color:#7aa2ff !important; font-weight:700;
}
.nowplaying, .corner{
  font-size:.58rem !important; letter-spacing:.06em !important; color:#9b9b9b !important;
  background:rgba(5,5,5,.72); padding:.35rem .55rem; border:1px solid rgba(242,242,242,.35);
}
.eq span{ border-radius:0 !important; background:#7aa2ff !important; }
.toast{
  background:rgba(5,5,5,.85) !important; border:2px solid rgba(242,242,242,.85) !important;
  color:#f2f2f2 !important; font-size:.62rem !important; letter-spacing:.06em !important;
  padding:.7rem 1.1rem !important;
}
.legal{ font-size:.55rem !important; letter-spacing:.06em !important; color:#9b9b9b !important; }

/* cozy's weather slider: square track, square knob, solid fill */
.wx-panel{ background:rgba(5,5,5,.78) !important; border:2px solid rgba(242,242,242,.85) !important; padding:.6rem .8rem .7rem !important; }
.wx-track{ border-radius:0 !important; background:rgba(242,242,242,.18) !important; height:6px !important; }
.wx-fill{ border-radius:0 !important; background:#7aa2ff !important; }
.wx-knob{ border-radius:0 !important; width:12px !important; height:16px !important; background:#f2f2f2 !important; box-shadow:none !important; }
.wx-label{ font-size:.58rem !important; letter-spacing:.06em !important; color:#f2f2f2 !important; }
.wx-icons button{ filter:grayscale(1); }
.wx-icons button.active{ filter:none; transform:none !important; }