/* Kano Life — high-quality pixel art direction */
:root {
  /* Locked pixel palette */
  --px-ink: #1a0f0a;
  --px-mud: #5c3d28;
  --px-mud-light: #8b5e3c;
  --px-sand: #c4a574;
  --px-sand-light: #e8d5b5;
  --px-indigo: #2a3a6e;
  --px-indigo-bright: #4a5a9e;
  --px-gold: #d4a017;
  --px-green: #3d6b35;
  --px-green-bright: #5a9a4a;
  --px-sky: #5b8ab5;
  --px-sky-light: #87b8d8;
  --px-white: #f5e6d3;
  --px-red: #a33b2b;
  --px-orange: #c45c2a;
  --px-night: #12122a;

  --font-pixel: "DM Sans", system-ui, sans-serif;
}

/* Crisp pixels everywhere */
img, svg, canvas, .building-art, .building-art svg,
.loc-building-preview, .loc-building-preview svg,
.building-preview-sm, .building-preview-sm svg,
.map-bg {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* Pixel HUD chrome */
.top-bar {
  border-bottom: 3px solid var(--px-mud);
  box-shadow: 0 3px 0 var(--px-ink);
}
.mood-strip {
  border-bottom: 2px solid var(--px-mud);
  letter-spacing: 0.04em;
}
.stat-money, .need-bar {
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 var(--px-ink);
}
.need-bar {
  height: 8px;
  border: 2px solid var(--px-ink);
}
.need-bar i {
  border-radius: 0 !important;
}

/* Pixel buttons */
.btn-primary, .btn-action, .btn-exit, .btn-talk, .btn-buy, .obj-card, .room-tab, .auth-tab {
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--px-ink);
  border-width: 2px !important;
  image-rendering: pixelated;
}
.btn-primary:active, .btn-action:active, .obj-card:active {
  box-shadow: 1px 1px 0 var(--px-ink);
  transform: translate(2px, 2px);
}

/* Pixel cards / panels */
.auth-card, .create-panel, .action-panel, .side-panel,
.interior-stage, .interior-chat, .chat-dock {
  border-radius: 0 !important;
  border-width: 3px !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,.45);
}

/* Map pixel frame */
.map-container {
  border-radius: 0 !important;
  border: 4px solid var(--px-mud) !important;
  box-shadow: 8px 8px 0 var(--px-ink);
  background: #2a1a10;
}

/* Pixel building pins */
.building-pin .building-art {
  width: 64px;
  height: 64px;
  filter: none;
  image-rendering: pixelated;
}
.building-pin .building-art svg {
  shape-rendering: crispEdges;
}
.location-pin .pin-label {
  border-radius: 0;
  border: 2px solid var(--px-ink);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  box-shadow: 2px 2px 0 var(--px-ink);
}
.location-pin.home .building-art {
  outline: 3px solid var(--px-gold);
  outline-offset: 2px;
  border-radius: 0;
}
.location-pin:hover {
  filter: brightness(1.1);
}

/* Pixel room objects */
.obj-card {
  border: 2px solid var(--px-mud) !important;
}
.obj-icon {
  font-size: 1.5rem;
  filter: contrast(1.05);
}

/* Intro badge pixel */
.intro-badge {
  border-radius: 0;
  border-width: 2px;
  letter-spacing: 0.2em;
}

/* Toast pixel */
.toast {
  border-radius: 0;
  border: 2px solid var(--px-gold);
  box-shadow: 4px 4px 0 var(--px-ink);
}

/* Nav pixel */
.bottom-nav {
  border-top: 3px solid var(--px-mud);
}
.nav-btn.active {
  box-shadow: inset 0 -3px 0 var(--px-gold);
}

/* Pixel floor pattern for interiors */
.interior-stage {
  background-color: #3d2418;
  background-image:
    linear-gradient(rgba(26,15,10,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,15,10,.35) 1px, transparent 1px);
  background-size: 16px 16px;
  border: 3px solid var(--px-mud) !important;
}

/* Auth pixel sky overlay subtle grid */
.sky-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image:
    linear-gradient(#000 1px, transparent 1px),
    linear-gradient(90deg, #000 1px, transparent 1px);
  background-size: 8px 8px;
}