/* =================================================
   POPUPS — search, wifi, context menu, hacker, lesson
   ================================================= */

/* TOAST */
#os-toast {
  position: fixed; bottom: calc(var(--taskbar-h) + 12px); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--accent); border: 2px solid var(--accent);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 8px 18px; z-index: 999;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
#os-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* WELCOME OVERLAY */
.welcome-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
}
.welcome-card {
  background: var(--ink); border: 3px solid var(--accent);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.5);
  padding: 28px 32px; max-width: 420px; width: 90%;
  color: var(--paper);
}
.welcome-card h2 {
  font-family: 'Geologica', sans-serif; font-weight: 900;
  font-size: 22px; margin-bottom: 18px; color: var(--accent);
}
.welcome-tips { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.welcome-tip {
  font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.4;
  display: flex; align-items: center; gap: 10px;
}
.welcome-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.welcome-go {
  background: var(--accent); color: var(--ink); border: 0;
  font-family: 'Geologica', sans-serif; font-weight: 900;
  font-size: 14px; padding: 10px 28px; cursor: pointer;
  letter-spacing: 1px; width: 100%;
}
.welcome-go:hover { background: var(--hover); }

/* SEARCH POPUP */
.search-pop {
  position: fixed;
  bottom: calc(var(--taskbar-h) + 6px);
  left: 0;
  width: 420px;
  background: var(--ink);
  border: 2px solid var(--accent);
  padding: 12px;
  z-index: 95;
  display: none;
  font-family: 'JetBrains Mono', monospace;
}
.search-pop.open { display: block; }
.search-pop .row {
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--accent);
  background: rgba(198,245,66,0.06);
  padding: 6px 10px;
}
.search-pop .row .pre { color: var(--accent); }
.search-pop input {
  flex: 1; background: transparent;
  border: 0; outline: 0;
  color: var(--paper);
  font: inherit; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 0;
}
.search-pop input::placeholder { color: rgba(255,255,255,0.4); }
.search-pop .kbd {
  background: var(--accent); color: var(--ink);
  font-size: 9px; padding: 1px 5px; font-weight: 700;
}
.search-pop .results { margin-top: 10px; max-height: 320px; overflow-y: auto; }
.search-pop .res {
  display: grid; grid-template-columns: 28px 1fr auto;
  gap: 8px; padding: 6px 8px; cursor: pointer;
  color: var(--paper); font-size: 11px;
  border-bottom: 1px dotted rgba(198,245,66,0.15);
}
.search-pop .res:hover { background: rgba(198,245,66,0.12); }
.search-pop .res .swatch {
  width: 26px; height: 26px;
  background: var(--cat, var(--accent));
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geologica', sans-serif; font-weight: 900;
  font-size: 14px; color: var(--ink);
}
.search-pop .res .meta { font-size: 9px; opacity: 0.55; letter-spacing: 1px; }
.search-pop .empty { padding: 14px; text-align: center; opacity: 0.55; font-size: 10px; }

/* WIFI POPUP */
.wifi-pop {
  position: fixed;
  bottom: calc(var(--taskbar-h) + 6px);
  right: 12px;
  width: 280px;
  background: var(--ink);
  border: 2px solid var(--accent);
  z-index: 95;
  display: none;
  font-family: 'JetBrains Mono', monospace;
}
.wifi-pop.open { display: block; }
.wifi-pop .wifi-head {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--accent); color: var(--ink);
  padding: 6px 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
}
.wifi-pop .wifi-head .bars { letter-spacing: -1.5px; font-size: 14px; }
.wifi-pop .wifi-current {
  padding: 10px 12px;
  font-family: 'Geologica', sans-serif; font-weight: 900;
  font-size: 14px; color: var(--accent);
  border-bottom: 1.5px dashed var(--accent);
  letter-spacing: 0.02em;
}
.wifi-pop .wifi-list { max-height: 280px; overflow-y: auto; }
.wifi-pop .wifi-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 12px;
  font-size: 11px; color: var(--paper);
  cursor: pointer;
  border-bottom: 1px dotted rgba(198,245,66,0.18);
  gap: 10px;
}
.wifi-pop .wifi-row:hover { background: rgba(198,245,66,0.12); }
.wifi-pop .wifi-row .nm {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wifi-pop .wifi-row .right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Signal-strength bars — ascending bar set, lit bars = strength (1–4). Shared geometry
   for both the row bars and the header "connected" indicator. */
.wifi-pop .sig {
  display: inline-flex; align-items: flex-end; justify-content: flex-end;
  gap: 2px; height: 13px; width: 21px; flex-shrink: 0;
}
.wifi-pop .sig i { width: 3px; display: block; background: transparent; }
.wifi-pop .sig i:nth-child(1) { height: 4px; }
.wifi-pop .sig i:nth-child(2) { height: 7px; }
.wifi-pop .sig i:nth-child(3) { height: 10px; }
.wifi-pop .sig i:nth-child(4) { height: 13px; }
/* Row bars: lime on the dark list */
.wifi-pop .wifi-row .sig i { box-shadow: inset 0 0 0 1px rgba(198, 245, 66, 0.4); }
.wifi-pop .wifi-row .sig i.on { background: var(--accent); box-shadow: none; }
/* Header bars: ink on the lime header strip */
.wifi-pop .wifi-head .sig i { box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.4); }
.wifi-pop .wifi-head .sig i.on { background: var(--ink); box-shadow: none; }
/* Connected network — highlighted, lock becomes a check */
.wifi-pop .wifi-row.connected { background: rgba(198, 245, 66, 0.10); }
.wifi-pop .wifi-row.connected .lock-icon { color: var(--accent); opacity: 1; }

/* Password prompt panel */
.wifi-pop .wifi-auth { display: none; padding: 12px; }
.wifi-pop .wifi-auth.show { display: block; }
.wifi-pop .wifi-list.hidden { display: none; }
.wifi-pop .wa-net {
  font-family: 'Geologica', sans-serif; font-weight: 900; font-size: 13px;
  color: var(--accent); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px; word-break: break-all;
}
.wifi-pop .wa-label {
  display: block; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--paper); opacity: 0.6; margin-bottom: 4px;
}
.wifi-pop .wa-pw {
  width: 100%; box-sizing: border-box; padding: 7px 8px;
  background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--accent);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; outline: none;
}
.wifi-pop .wa-msg { min-height: 14px; font-size: 10px; margin: 6px 0; letter-spacing: 0.5px; }
.wifi-pop .wa-msg.ok  { color: var(--accent); }
.wifi-pop .wa-msg.err { color: var(--hover); }
.wifi-pop .wa-btns { display: flex; gap: 6px; justify-content: flex-end; }
.wifi-pop .wa-btns button {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; cursor: pointer;
  border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
}
.wifi-pop .wa-btns .wa-connect { background: var(--accent); color: var(--ink); }
.wifi-pop .wa-btns button:hover { background: var(--hover); border-color: var(--hover); color: var(--ink); }
.wifi-pop .wifi-row .lock-icon {
  width: 14px; text-align: center;
  font-size: 10px; opacity: 0.5;
}
.wifi-pop .wifi-row.open-net .lock-icon { visibility: hidden; }
.wifi-pop .wifi-row.shrink .nm { font-size: 7px; opacity: 0.65; letter-spacing: 0.3px; }
.wifi-pop .wifi-row.shrink .sig { transform: scale(0.65); opacity: 0.55; }
.wifi-pop .wifi-row.shrink .lock-icon { font-size: 8px; }
.wifi-pop .wifi-row.teleport { transition: opacity 0.25s; }
.wifi-pop .wifi-row.teleport.gone { visibility: hidden; }

/* VOLUME POPUP — vertical slider above the tray Vol button */
.vol-pop {
  position: fixed;
  bottom: calc(var(--taskbar-h) + 6px);
  right: 96px; /* sits roughly above the volume tray button */
  width: 84px;
  background: var(--ink);
  border: 2px solid var(--accent);
  z-index: 95;
  display: none;
  font-family: 'JetBrains Mono', monospace;
}
.vol-pop.open { display: block; }
.vol-pop .vol-head {
  background: var(--accent); color: var(--ink);
  padding: 6px 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-align: center;
}
.vol-pop .vol-body {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 12px 8px 10px;
}
.vol-pop .vol-num {
  color: var(--accent);
  font-family: 'Geologica', sans-serif; font-weight: 900;
  font-size: 16px; letter-spacing: 0.04em;
}
.vol-pop .vol-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 26px; height: 130px;
  background: transparent;
  accent-color: var(--accent);
  cursor: pointer;
}
.vol-pop .vol-actions { width: 100%; }
.vol-pop .vol-actions button {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  padding: 5px 0;
  font: inherit;
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  cursor: pointer;
}
.vol-pop .vol-actions button:hover,
.vol-pop .vol-actions button.muted {
  background: var(--accent); color: var(--ink);
}

/* RIGHT-CLICK CONTEXT */
.ctx {
  position: fixed;
  background: var(--ink);
  border: 2px solid var(--accent);
  color: var(--paper);
  padding: 4px;
  z-index: 999;
  display: none;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1px; text-transform: uppercase;
  width: 340px;
}
.ctx.open { display: block; }
.ctx button {
  width: 100%; background: transparent; border: 0;
  color: var(--paper);
  padding: 6px 10px; text-align: left;
  font: inherit; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.ctx button:hover { background: var(--accent); color: var(--ink); }
.ctx .sep { height: 1px; background: rgba(255,255,255,0.15); margin: 4px 0; }
.ctx .wp-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 6px; }
.ctx .wp { height: 28px; cursor: pointer; border: 1.5px solid rgba(255,255,255,0.3); background-size: cover; background-position: center; }
.ctx .wp:hover { border-color: var(--accent); }
.ctx .wp.active { border-color: var(--hover); box-shadow: 0 0 0 1px var(--hover); }

/* HACKER EASTER EGG */
.hacker {
  position: fixed; inset: 0;
  background: #000;
  color: #00ff00;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  z-index: 9500;
  display: none;
  padding: 20px 24px;
  overflow: hidden;
}
.hacker.show { display: block; }
.hacker::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,255,0,0.04) 2px 3px);
  pointer-events: none;
}
.hacker .h-lines {
  font-size: 11px; line-height: 1.45;
  max-height: 60vh; overflow: hidden;
  text-shadow: 0 0 4px #00ff00;
}
.hacker .h-lines .line { opacity: 0; animation: hLineIn 0.12s forwards; }
@keyframes hLineIn { to { opacity: 1; } }
.hacker .h-skull {
  position: absolute;
  top: 36%; left: 50%; transform: translate(-50%, -50%) scale(0);
  font-size: 180px;
  color: var(--hover);
  text-shadow: 0 0 30px var(--hover);
  animation: hPop 0.4s 2.6s forwards;
  pointer-events: none;
}
@keyframes hPop { to { transform: translate(-50%, -50%) scale(1); } }
.hacker .h-banner {
  position: absolute;
  top: 64%; left: 50%; transform: translate(-50%, -50%) rotate(-3deg) scale(0);
  font-family: 'Geologica', sans-serif; font-weight: 900;
  font-size: 110px; color: var(--hover);
  text-shadow: 6px 6px 0 #000, 0 0 30px var(--hover);
  letter-spacing: 0.04em;
  animation: hPop 0.4s 3.1s forwards;
  pointer-events: none;
  white-space: nowrap;
}

/* LESSON DIALOG */
.lesson-dialog {
  position: fixed;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--paper);
  border: 4px solid var(--ink);
  /* Layered riso-stack shadow — three tight, colored offsets read as depth instead of one
     box floating far behind. */
  box-shadow: 4px 4px 0 var(--hover), 8px 8px 0 var(--c-web), 12px 12px 0 var(--primary);
  padding: 28px 36px 32px;
  max-width: 520px;
  width: calc(100vw - 60px);
  z-index: 9600;
  display: none;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  text-align: center;
}
.lesson-dialog.show { display: block; }
.lesson-dialog .icon { margin-bottom: 10px; }
.lesson-dialog .icon img { width: 84px; height: auto; display: block; margin: 0 auto; }
.lesson-dialog h3 {
  font-family: 'Geologica', sans-serif; font-weight: 900;
  font-size: 28px; letter-spacing: 0.01em;
  margin-bottom: 14px; text-transform: uppercase;
}
.lesson-dialog p {
  font-size: 14px; line-height: 1.5;
  margin-bottom: 12px; font-weight: 500;
}
.lesson-dialog p:last-of-type { margin-bottom: 22px; }
.lesson-dialog button {
  background: var(--accent); color: var(--ink);
  border: 3px solid var(--ink);
  padding: 12px 22px;
  font-family: 'Geologica', sans-serif; font-weight: 900;
  font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; cursor: pointer;
  box-shadow: 5px 5px 0 var(--ink);
}
.lesson-dialog button:hover {
  background: var(--hover); color: var(--paper);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}

/* CONFETTI */
.confetti {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9000;
  display: none;
}
.confetti.show { display: block; }
.confetti i {
  position: absolute; top: -20px;
  width: 14px; height: 18px;
  animation: fall 1.4s linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* BUG STOMP v1 — retired, kept for reference */
.desktop-bug {
  position: absolute; z-index: 90;
  font-size: 22px; cursor: pointer;
  user-select: none; pointer-events: auto;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.4));
  transition: font-size 0.15s;
}
.desktop-bug:hover { font-size: 26px; }

/* ── DAILY BUG HUNT ──────────────────────────────────────────────── */

.hunt-hidden-bug {
  position: absolute; z-index: 12;
  right: -3px; top: -3px;
  font-size: 13px; line-height: 1;
  cursor: pointer; user-select: none; pointer-events: auto;
  animation: bug-idle 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.6));
}
.hunt-hidden-bug:hover { font-size: 17px; }
@keyframes bug-idle {
  0%, 100% { transform: rotate(-8deg); }
  50%       { transform: rotate(8deg) scale(1.1); }
}

.bug-found-dlg {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.65);
}
.bug-found-dlg .bfd-box {
  background: var(--ink); border: 3px solid var(--accent);
  box-shadow: 6px 6px 0 var(--accent);
  padding: 28px 36px; text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; letter-spacing: 1.5px; color: var(--paper);
  max-width: 340px; width: 90%;
}
.bfd-icon { font-size: 44px; line-height: 1; margin-bottom: 6px; }
.bfd-title {
  font-family: 'Geologica', sans-serif; font-weight: 900;
  font-size: 18px; color: var(--accent); letter-spacing: 2px; margin-bottom: 8px;
}
.bfd-score {
  font-family: 'Geologica', sans-serif; font-weight: 900;
  font-size: 64px; color: var(--hover); line-height: 1; margin: 8px 0 4px;
}
.bfd-sub { font-size: 11px; opacity: 0.7; letter-spacing: 1px; }
.bfd-alltime { margin-top: 6px; font-size: 10px; opacity: 0.45; }
.bfd-btns { display: flex; gap: 10px; margin-top: 18px; }
.bfd-btns button {
  flex: 1; padding: 10px 14px;
  border: 2px solid var(--accent);
  background: transparent; color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer; text-transform: uppercase;
}
.bfd-btns .bfd-yes { background: var(--accent); color: var(--ink); }
.bfd-btns button:hover { background: var(--hover); border-color: var(--hover); color: var(--ink); }

.bug-frenzy {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.55);
  pointer-events: all; overflow: hidden;
}
.bug-frenzy .bh-hud {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: var(--ink); border: 2px solid var(--accent);
  box-shadow: 4px 4px 0 var(--accent);
  padding: 8px 20px; display: flex; gap: 10px; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px; font-weight: 700; letter-spacing: 2px;
  color: var(--paper); white-space: nowrap; z-index: 202;
}
.bug-frenzy .bh-hud .bh-label { font-size: 11px; opacity: 0.65; }
.bug-frenzy .bh-hud .bh-sep   { opacity: 0.4; }
.bug-frenzy .bh-hud #bh-score { font-size: 22px; color: var(--accent); }
.bug-frenzy .bh-hud #bh-timer { font-size: 22px; font-family: 'VT323', monospace; color: var(--primary); }
.bug-frenzy .bh-hint {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--paper); opacity: 0.5; letter-spacing: 2px; pointer-events: none;
}

.frenzy-bug {
  position: absolute; font-size: 28px;
  cursor: pointer; user-select: none; z-index: 201;
  animation: frenzy-scuttle linear forwards;
  pointer-events: auto;
}
.frenzy-bug:hover { font-size: 32px; }
@keyframes frenzy-scuttle {
  0%   { transform: translate(0,0) rotate(-8deg); }
  25%  { transform: translate(calc(var(--tx)*.25), calc(var(--ty)*.25)) rotate(8deg); }
  50%  { transform: translate(calc(var(--tx)*.5),  calc(var(--ty)*.5))  rotate(-8deg); }
  75%  { transform: translate(calc(var(--tx)*.75), calc(var(--ty)*.75)) rotate(8deg); }
  100% { transform: translate(var(--tx), var(--ty)) rotate(-8deg); }
}

.bug-boom {
  position: fixed; font-size: 28px; z-index: 203;
  pointer-events: none; animation: boom-pop 0.55s ease-out forwards;
}
@keyframes boom-pop {
  0%   { transform: scale(0.5); opacity: 1; }
  60%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}