/* Nora Network base styles. Colors come from per-character CSS variables set in
   base.html (:root). Components are theme-agnostic and read those tokens so the
   whole UI re-skins instantly when the character changes. */

* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, .headline { font-family: var(--headline-font); letter-spacing: -0.01em; }

/* --- Header --- */
.nv-header {
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.nv-logo-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 12px var(--accent);
  display: inline-block;
}
.nv-link { color: var(--muted); transition: color .2s ease; }
.nv-link:hover { color: var(--text); }
.nv-balance {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text); padding: 4px 10px; border-radius: 999px; font-weight: 600;
}
.nv-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--accent); background: var(--surface); }

/* --- Buttons --- */
.nv-btn {
  background: var(--btn-bg); color: var(--btn-text); padding: 8px 16px; border-radius: 10px;
  font-weight: 600; border: none; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease;
  display: inline-block; text-align: center;
}
.nv-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent); }
.nv-btn--ghost { background: transparent; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); }
.nv-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* --- Cards --- */
.nv-card {
  background: var(--surface); border-radius: 16px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  transition: transform .18s ease, box-shadow .25s ease; display: block;
}
.nv-card:hover { transform: translateY(-4px);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--primary) 28%, transparent); }
.nv-card__img { aspect-ratio: 9/16; width: 100%; object-fit: cover; background: var(--bg); display:block; }
.nv-card__body { padding: 10px 12px; }
.nv-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--text); }

/* --- Section headers + horizontal scrollers --- */
.nv-section { margin: 28px 0; }
.nv-section__head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.nv-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 14px;
  overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.nv-scroller > * { scroll-snap-align: start; }
.nv-carousel-btn { width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); font-size: 16px; line-height: 1; }
.nv-carousel-btn:hover { background: var(--btn-bg); color: var(--btn-text); }
.nv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px){ .nv-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px){ .nv-grid { grid-template-columns: repeat(5, 1fr); } }

/* --- Toasts --- */
.nv-toasts { position: fixed; bottom: 20px; right: 20px; z-index: 60; display:flex; flex-direction:column; gap:8px; }
.nv-toast { background: var(--surface); color: var(--text); padding: 12px 16px; border-radius: 12px;
  border-left: 4px solid var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.18);
  animation: nv-slide-in .3s ease, nv-fade-out .4s ease 4s forwards; }
.nv-toast--success { border-left-color: #22c55e; }
.nv-toast--error { border-left-color: #ef4444; }
@keyframes nv-slide-in { from { opacity:0; transform: translateY(10px);} to{opacity:1;transform:none;} }
@keyframes nv-fade-out { to { opacity:0; transform: translateY(8px); } }

/* --- Inline error (credit checks etc., spec point 7) --- */
.nv-inline-error { color: #ef4444; font-size: 13px; margin-top: 6px; }
.nv-inline-error a { text-decoration: underline; color: var(--accent); }

/* --- Loading shimmer (never an empty wait, spec point: loading states) --- */
.nv-shimmer { position: relative; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); }
.nv-shimmer::after { content:""; position:absolute; inset:0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 12%, transparent), transparent);
  animation: nv-shimmer 1.2s infinite; }
@keyframes nv-shimmer { 100% { transform: translateX(100%); } }

/* --- Hide scrollbars everywhere (edits.md R1) --- */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* --- Mobile menu (video-game style full-screen blur) --- */
.nv-burger { display: flex; flex-direction: column; gap: 4px; background: transparent; border: none; cursor: pointer; padding: 6px; }
.nv-burger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: .2s; }
.nv-menu {
  position: fixed; inset: 0; z-index: 80; display: none;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
  padding: 18px;
}
.nv-menu.open { display: block; }
.nv-menu__panel {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 20px; padding: 22px; max-width: 420px; margin: 8vh auto 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.nv-menu__close { background: transparent; border: none; color: var(--text); font-size: 20px; cursor: pointer; }
.nv-menu__links { display: flex; flex-direction: column; gap: 4px; }
.nv-menu__links a {
  padding: 14px 16px; border-radius: 12px; font-size: 18px; font-weight: 600;
  font-family: var(--headline-font); color: var(--text); transition: .15s;
  border: 1px solid transparent;
}
.nv-menu__links a:hover, .nv-menu__links a:active {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translateX(4px);
}

/* --- Character hero (landing) --- */
.nv-hero-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
@media (min-width: 768px){ .nv-hero-grid { grid-template-columns: repeat(3,1fr); } }
.nv-hero-card { border-radius: 18px; padding: 18px; cursor: pointer; position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, #fff 12%, transparent); transition: transform .2s ease; min-height: 320px;
  display:flex; flex-direction:column; justify-content:flex-end; }
.nv-hero-card:hover { transform: translateY(-6px) scale(1.01); }
.nv-hero-card img { position:absolute; inset:0; width:100%; height:78%; object-fit: contain; object-position: top center; }
.nv-hero-card__meta { position: relative; z-index: 2; }
.nv-fade-in { animation: nv-fade-in .5s ease; }
@keyframes nv-fade-in { from { opacity: 0; } to { opacity: 1; } }