/* Shared easter egg windows (terminal + games) + toast.
   Themeable via CSS variables, set per version:
   --egg-bg, --egg-chrome, --egg-text, --egg-muted, --egg-dim, --egg-line,
   --egg-accent, --egg-ok, --egg-err, --egg-warn, --egg-purple,
   --egg-radius, --egg-border-w, --egg-border-c, --egg-shadow, --egg-font */

.term-overlay, .gm-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 10, 14, 0.55);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.term-overlay.open, .gm-overlay.open { opacity: 1; pointer-events: all; }

.term-window, .gm-window {
  background: var(--egg-bg, #10141c);
  border: var(--egg-border-w, 1px) solid var(--egg-border-c, rgba(255,255,255,0.16));
  border-radius: var(--egg-radius, 0);
  box-shadow: var(--egg-shadow, 0 24px 80px rgba(0,0,0,0.5));
  display: flex; flex-direction: column; overflow: hidden;
}
.term-window { width: 100%; max-width: 680px; height: min(460px, 80vh); }
.gm-window { width: min(440px, 94vw); }

.term-titlebar, .gm-hdr {
  display: flex; align-items: center;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--egg-line, rgba(255,255,255,0.1));
  background: var(--egg-chrome, #161b26);
}
.term-titlebar { gap: 0.45rem; }
.gm-hdr { justify-content: space-between; padding: 0.55rem 0.7rem; }

.tl { width: 11px; height: 11px; border-radius: 50%; }
.tl-r { background: #c96a5c; cursor: pointer; }
.tl-y { background: #c9ab5f; }
.tl-g { background: #79a86d; }
.term-title {
  margin-left: 0.6rem; font-family: var(--egg-font, monospace);
  font-size: 0.72rem; color: var(--egg-muted, #98a4ba);
}
.term-body {
  flex: 1; overflow-y: auto; padding: 0.9rem 1rem;
  font-family: var(--egg-font, monospace); font-size: 0.8rem;
  line-height: 1.55; color: var(--egg-text, #ccd5e3);
}
.t-out { white-space: pre-wrap; word-break: break-word; }
.t-out.accent { color: var(--egg-accent, #e29a6a); }
.t-out.ok     { color: var(--egg-ok, #8fc98f); }
.t-out.err    { color: var(--egg-err, #d97b6c); }
.t-out.warn   { color: var(--egg-warn, #d9b36a); }
.t-out.muted  { color: var(--egg-muted, #8494ac); }
.t-out.dim    { color: var(--egg-dim, #46536b); }
.t-prompt-row { display: flex; gap: 0.5rem; align-items: baseline; }
.t-prompt { color: var(--egg-ok, #8fc98f); white-space: nowrap; }
.t-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--egg-font, monospace); font-size: 0.8rem;
  color: var(--egg-text, #e7ebf2); caret-color: var(--egg-accent, #e29a6a);
}

.gm-tabs { display: flex; gap: 0.3rem; }
.gm-tab {
  background: transparent; border: 1px solid transparent; cursor: pointer;
  font-family: var(--egg-font, monospace); font-size: 0.72rem;
  color: var(--egg-muted, #8494ac); padding: 0.3rem 0.6rem;
  transition: color 0.15s, border-color 0.15s;
}
.gm-tab:hover { color: var(--egg-text, #e7ebf2); }
.gm-tab.active { color: var(--egg-accent, #e29a6a); border-color: var(--egg-accent, #e29a6a); }
.gm-hdr-r { display: flex; align-items: center; gap: 0.7rem; }
.gm-score {
  font-family: var(--egg-font, monospace); font-size: 0.75rem;
  color: var(--egg-text, #e7ebf2); display: flex; gap: 0.5rem; align-items: baseline;
}
.gm-hs { color: var(--egg-muted, #8494ac); font-size: 0.68rem; }
.gm-close-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--egg-muted, #8494ac); display: flex; padding: 0.25rem; transition: color 0.15s;
}
.gm-close-btn:hover { color: var(--egg-text, #e7ebf2); }
.gm-body { display: flex; align-items: center; justify-content: center; padding: 0.9rem; }
.gm-body canvas { width: 100%; max-width: 400px; height: auto; display: block; touch-action: none; }
.gm-foot {
  font-family: var(--egg-font, monospace); font-size: 0.68rem;
  color: var(--egg-muted, #8494ac); text-align: center;
  padding: 0.55rem 0.7rem 0.75rem;
  border-top: 1px solid var(--egg-line, rgba(255,255,255,0.08));
}

.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 12px); z-index: 300;
  background: var(--egg-toast-bg, #e7ebf2); color: var(--egg-toast-fg, #10141c);
  font-family: var(--egg-font, monospace); font-size: 0.78rem;
  padding: 0.6rem 1.1rem; border-radius: var(--egg-radius, 0);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s, transform 0.55s; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}