/* ==========================================================================
   Anchor HQ -- Pixel-Art UI Components
   Stardew Valley / Cozy RPG Component Library
   ==========================================================================
   Requires: tokens.css loaded first.
   All pixel effects are pure CSS (no images).
   ========================================================================== */


/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */

/* Gold sparkle for progress bars and achievements */
@keyframes pixel-sparkle {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Shimmer sweep across an element */
@keyframes pixel-shimmer {
  0%   { left: -40%; }
  100% { left: 140%; }
}

/* Checkbox pop-in */
@keyframes pixel-check-pop {
  0%   { transform: scale(0); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Bounce for toasts / badges */
@keyframes pixel-bounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-4px); }
  60%      { transform: translateY(-2px); }
}

/* Tooltip fade-in */
@keyframes pixel-fade-in {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Toggle lever slide */
@keyframes pixel-lever-on {
  0%   { transform: translateX(0); }
  100% { transform: translateX(20px); }
}


/* ==========================================================================
   1.  PIXEL BORDER MIXIN  (box-shadow retro border)
   ==========================================================================
   Apply .pixel-border to any element for a classic game UI outline.
   Uses layered box-shadows to simulate a 2px pixel-art border.
   ========================================================================== */

.pixel-border {
  box-shadow:
    /* outer border (dark) */
    -2px  0    0 0 var(--border-wood),
     2px  0    0 0 var(--border-wood),
     0   -2px  0 0 var(--border-wood),
     0    2px  0 0 var(--border-wood),
    /* corner pixels */
    -2px -2px  0 0 var(--border-wood),
     2px -2px  0 0 var(--border-wood),
    -2px  2px  0 0 var(--border-wood),
     2px  2px  0 0 var(--border-wood);
  border: none;
  border-radius: 0;
}

/* Thicker 3px variant for prominent panels */
.pixel-border-thick {
  box-shadow:
    -3px  0    0 0 var(--border-wood),
     3px  0    0 0 var(--border-wood),
     0   -3px  0 0 var(--border-wood),
     0    3px  0 0 var(--border-wood),
    -3px -3px  0 0 var(--border-wood),
     3px -3px  0 0 var(--border-wood),
    -3px  3px  0 0 var(--border-wood),
     3px  3px  0 0 var(--border-wood);
  border: none;
  border-radius: 0;
}

/* Inset / recessed pixel border (for inputs, wells) */
.pixel-border-inset {
  box-shadow:
    inset -2px  0    0 0 var(--border-wood-light),
    inset  2px  0    0 0 var(--border-wood),
    inset  0   -2px  0 0 var(--border-wood-light),
    inset  0    2px  0 0 var(--border-wood),
    inset -2px -2px  0 0 var(--border-wood-light),
    inset  2px -2px  0 0 var(--border-wood),
    inset -2px  2px  0 0 var(--border-wood),
    inset  2px  2px  0 0 var(--border-wood);
  border: none;
  border-radius: 0;
}


/* ==========================================================================
   2.  PIXEL BUTTONS
   ==========================================================================
   Embossed 3D look with press-down on :active.
   ========================================================================== */

.pixel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  letter-spacing: var(--tracking-pixel);
  line-height: var(--leading-none);
  color: var(--text-on-parchment);
  background: var(--parchment);
  border: none;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  user-select: none;
  image-rendering: var(--pixel-rendering);
  transition: transform var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
  /* 3D embossed effect */
  box-shadow:
    /* outer pixel border */
    -2px  0    0 0 var(--border-wood),
     2px  0    0 0 var(--border-wood),
     0   -2px  0 0 var(--border-wood),
     0    2px  0 0 var(--border-wood),
    -2px -2px  0 0 var(--border-wood),
     2px -2px  0 0 var(--border-wood),
    -2px  2px  0 0 var(--border-wood),
     2px  2px  0 0 var(--border-wood),
    /* bottom emboss (3D depth) */
     0    4px  0 0 var(--border-wood),
    -2px  4px  0 0 var(--border-wood),
     2px  4px  0 0 var(--border-wood);
}

.pixel-btn:hover {
  background: var(--parchment-aged);
  transform: translateY(-1px);
  box-shadow:
    -2px  0    0 0 var(--border-wood),
     2px  0    0 0 var(--border-wood),
     0   -2px  0 0 var(--border-wood),
     0    2px  0 0 var(--border-wood),
    -2px -2px  0 0 var(--border-wood),
     2px -2px  0 0 var(--border-wood),
    -2px  2px  0 0 var(--border-wood),
     2px  2px  0 0 var(--border-wood),
     0    5px  0 0 var(--border-wood),
    -2px  5px  0 0 var(--border-wood),
     2px  5px  0 0 var(--border-wood);
}

.pixel-btn:active {
  transform: translateY(3px);
  box-shadow:
    -2px  0    0 0 var(--border-wood),
     2px  0    0 0 var(--border-wood),
     0   -2px  0 0 var(--border-wood),
     0    2px  0 0 var(--border-wood),
    -2px -2px  0 0 var(--border-wood),
     2px -2px  0 0 var(--border-wood),
    -2px  2px  0 0 var(--border-wood),
     2px  2px  0 0 var(--border-wood);
}

.pixel-btn:focus-visible {
  outline: none;
  box-shadow:
    -2px  0    0 0 var(--border-focus),
     2px  0    0 0 var(--border-focus),
     0   -2px  0 0 var(--border-focus),
     0    2px  0 0 var(--border-focus),
    -2px -2px  0 0 var(--border-focus),
     2px -2px  0 0 var(--border-focus),
    -2px  2px  0 0 var(--border-focus),
     2px  2px  0 0 var(--border-focus),
     0    4px  0 0 var(--border-focus),
    -2px  4px  0 0 var(--border-focus),
     2px  4px  0 0 var(--border-focus),
     0 0 0 6px rgba(232, 93, 58, 0.25);
}

/* Primary variant (accent orange-red) */
.pixel-btn--primary {
  background: var(--accent);
  color: #fff;
}
.pixel-btn--primary:hover {
  background: var(--accent-hover);
}

/* Success variant (green) */
.pixel-btn--success {
  background: var(--accent-green);
  color: #fff;
}
.pixel-btn--success:hover {
  background: var(--accent-green-hover);
}

/* Gold variant */
.pixel-btn--gold {
  background: var(--gradient-gold);
  color: var(--text-inverse);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Small size */
.pixel-btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--pixel-xs);
}

/* Large size */
.pixel-btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--pixel-base);
}


/* ==========================================================================
   3.  PARCHMENT CARD
   ==========================================================================
   Warm background with subtle CSS texture simulating old paper.
   ========================================================================== */

.pixel-card-parchment {
  background:
    /* Subtle noise texture via radial gradients */
    radial-gradient(ellipse at 20% 50%, rgba(139, 111, 71, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(139, 111, 71, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(139, 111, 71, 0.05) 0%, transparent 50%),
    var(--gradient-parchment);
  color: var(--text-on-parchment);
  padding: var(--space-4);
  position: relative;
  border: 2px solid var(--border-parchment);
  border-radius: var(--radius-pixel);
  box-shadow: var(--shadow-md);
}

/* Aged edge effect via pseudo-element */
.pixel-card-parchment::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(139, 111, 71, 0.12) 0%, transparent 3%, transparent 97%, rgba(139, 111, 71, 0.12) 100%),
    linear-gradient(180deg, rgba(139, 111, 71, 0.08) 0%, transparent 4%, transparent 96%, rgba(139, 111, 71, 0.1) 100%);
  pointer-events: none;
}


/* ==========================================================================
   4.  WOODEN FRAME CARD
   ==========================================================================
   Dark wood frame wrapping a parchment interior.
   ========================================================================== */

.pixel-card-wood {
  background: var(--bg-panel);
  padding: 6px;
  border-radius: var(--radius-pixel);
  box-shadow:
    /* Outer pixel border (dark wood) */
    -3px  0    0 0 var(--border-wood),
     3px  0    0 0 var(--border-wood),
     0   -3px  0 0 var(--border-wood),
     0    3px  0 0 var(--border-wood),
    -3px -3px  0 0 var(--border-wood),
     3px -3px  0 0 var(--border-wood),
    -3px  3px  0 0 var(--border-wood),
     3px  3px  0 0 var(--border-wood),
    /* Depth shadow */
     0    6px  12px rgba(0, 0, 0, 0.25);
  /* Wood grain texture via repeating gradient */
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 8px,
      rgba(139, 111, 71, 0.08) 8px,
      rgba(139, 111, 71, 0.08) 10px
    ),
    var(--gradient-panel);
}

/* The parchment interior */
.pixel-card-wood__inner {
  background: var(--gradient-parchment);
  color: var(--text-on-parchment);
  padding: var(--space-4);
  border: 2px solid var(--border-parchment);
  border-radius: var(--radius-pixel);
}

/* Dark interior variant (for dark-on-dark panels) */
.pixel-card-wood__inner--dark {
  background: var(--gradient-panel);
  color: var(--text-primary);
  border-color: var(--border-dark);
}


/* ==========================================================================
   5.  PIXEL PROGRESS BAR
   ==========================================================================
   Segmented fill, gold color, sparkle animation.
   ========================================================================== */

.pixel-progress {
  width: 100%;
  height: 20px;
  background: var(--bg-surface);
  border-radius: 0;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset -2px  0    0 0 var(--border-wood),
    inset  2px  0    0 0 var(--border-wood),
    inset  0   -2px  0 0 var(--border-wood),
    inset  0    2px  0 0 var(--border-wood);
}

.pixel-progress__fill {
  height: 100%;
  background:
    /* Segmented look via repeating gradient */
    repeating-linear-gradient(
      90deg,
      var(--gold) 0px,
      var(--gold) 8px,
      var(--gold-dim) 8px,
      var(--gold-dim) 10px
    );
  background-size: 200% 100%;
  animation: pixel-sparkle 3s linear infinite;
  position: relative;
  transition: width var(--duration-moderate) var(--ease-out);
  min-width: 0;
  border-right: 2px solid var(--border-wood);
}

/* Shimmer highlight overlay */
.pixel-progress__fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 30%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  animation: pixel-shimmer 2.5s ease-in-out infinite;
}

/* Color variants */
.pixel-progress--green .pixel-progress__fill {
  background:
    repeating-linear-gradient(
      90deg,
      var(--accent-green) 0px,
      var(--accent-green) 8px,
      var(--accent-green-active) 8px,
      var(--accent-green-active) 10px
    );
  background-size: 200% 100%;
}

.pixel-progress--accent .pixel-progress__fill {
  background:
    repeating-linear-gradient(
      90deg,
      var(--accent) 0px,
      var(--accent) 8px,
      var(--accent-active) 8px,
      var(--accent-active) 10px
    );
  background-size: 200% 100%;
}

/* XP text overlay */
.pixel-progress__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--text-on-parchment);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  letter-spacing: var(--tracking-pixel);
  z-index: 1;
  pointer-events: none;
}


/* ==========================================================================
   6.  PIXEL CHECKBOX
   ==========================================================================
   Empty box that fills with a checkmark on :checked.
   ========================================================================== */

.pixel-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--parchment);
  border: none;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  box-shadow:
    inset -2px  0    0 0 var(--border-wood),
    inset  2px  0    0 0 var(--border-wood),
    inset  0   -2px  0 0 var(--border-wood),
    inset  0    2px  0 0 var(--border-wood);
  transition: background var(--duration-fast) var(--ease-default);
}

.pixel-checkbox:hover {
  background: var(--parchment-aged);
}

/* Checkmark via pseudo-element */
.pixel-checkbox:checked::after {
  content: "";
  position: absolute;
  /* Pixel checkmark built with box-shadows */
  width: 2px;
  height: 2px;
  top: 4px;
  left: 4px;
  background: transparent;
  box-shadow:
    /* Draw a pixel checkmark shape */
     8px  2px 0 0 var(--accent-green),
     6px  4px 0 0 var(--accent-green),
     4px  6px 0 0 var(--accent-green),
     2px  4px 0 0 var(--accent-green),
     0px  2px 0 0 var(--accent-green),
    10px  0px 0 0 var(--accent-green);
  animation: pixel-check-pop var(--duration-moderate) var(--ease-bounce);
}

.pixel-checkbox:checked {
  background: var(--accent-green-subtle);
}

.pixel-checkbox:focus-visible {
  outline: none;
  box-shadow:
    inset -2px  0    0 0 var(--border-focus),
    inset  2px  0    0 0 var(--border-focus),
    inset  0   -2px  0 0 var(--border-focus),
    inset  0    2px  0 0 var(--border-focus),
    0 0 0 4px rgba(232, 93, 58, 0.25);
}


/* ==========================================================================
   7.  SPEECH BUBBLE TOOLTIP
   ==========================================================================
   Stardew NPC dialogue style.
   ========================================================================== */

.pixel-tooltip {
  position: relative;
  display: inline-block;
}

.pixel-tooltip__bubble {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--parchment);
  color: var(--text-on-parchment);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
  border-radius: 0;
  z-index: var(--z-tooltip);
  pointer-events: none;
  opacity: 0;
  animation: pixel-fade-in var(--duration-normal) var(--ease-out) forwards;
  box-shadow:
    -2px  0    0 0 var(--border-wood),
     2px  0    0 0 var(--border-wood),
     0   -2px  0 0 var(--border-wood),
     0    2px  0 0 var(--border-wood),
    -2px -2px  0 0 var(--border-wood),
     2px -2px  0 0 var(--border-wood),
    -2px  2px  0 0 var(--border-wood),
     2px  2px  0 0 var(--border-wood),
    0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Speech bubble tail (pixel arrow pointing down) */
.pixel-tooltip__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  /* Pixel-stepped triangle using box-shadow */
  background: transparent;
  box-shadow:
    -4px 0 0 0 var(--parchment),
    -2px 0 0 0 var(--parchment),
     0px 0 0 0 var(--parchment),
     2px 0 0 0 var(--parchment),
    -2px 2px 0 0 var(--parchment),
     0px 2px 0 0 var(--parchment),
     0px 4px 0 0 var(--parchment),
    /* Border of the tail */
    -6px 0 0 0 var(--border-wood),
     4px 0 0 0 var(--border-wood),
    -4px 2px 0 0 var(--border-wood),
     2px 2px 0 0 var(--border-wood),
    -2px 4px 0 0 var(--border-wood),
     0px 6px 0 0 var(--border-wood);
  width: 2px;
  height: 2px;
}

/* Show on hover */
.pixel-tooltip:hover .pixel-tooltip__bubble {
  opacity: 1;
}

/* Pixel font variant for NPC-style dialogue */
.pixel-tooltip__bubble--npc {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  letter-spacing: var(--tracking-pixel);
  line-height: var(--leading-loose);
  padding: var(--space-3) var(--space-4);
}


/* ==========================================================================
   8.  PIXEL BADGE / PILL
   ==========================================================================
   Small status indicators and labels.
   ========================================================================== */

.pixel-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  letter-spacing: var(--tracking-pixel);
  line-height: var(--leading-tight);
  color: var(--text-on-parchment);
  background: var(--parchment);
  border-radius: 0;
  white-space: nowrap;
  box-shadow:
    -2px  0    0 0 var(--border-wood),
     2px  0    0 0 var(--border-wood),
     0   -2px  0 0 var(--border-wood),
     0    2px  0 0 var(--border-wood);
}

.pixel-badge--gold {
  background: var(--gradient-gold);
  color: var(--text-inverse);
  box-shadow:
    -2px  0    0 0 var(--gold-dim),
     2px  0    0 0 var(--gold-dim),
     0   -2px  0 0 var(--gold-dim),
     0    2px  0 0 var(--gold-dim),
    var(--shadow-glow);
}

.pixel-badge--accent {
  background: var(--accent);
  color: #fff;
  box-shadow:
    -2px  0    0 0 var(--accent-active),
     2px  0    0 0 var(--accent-active),
     0   -2px  0 0 var(--accent-active),
     0    2px  0 0 var(--accent-active);
}

.pixel-badge--green {
  background: var(--accent-green);
  color: #fff;
  box-shadow:
    -2px  0    0 0 var(--accent-green-active),
     2px  0    0 0 var(--accent-green-active),
     0   -2px  0 0 var(--accent-green-active),
     0    2px  0 0 var(--accent-green-active);
}

.pixel-badge--purple {
  background: var(--purple);
  color: #fff;
  box-shadow:
    -2px  0    0 0 #6b3fd4,
     2px  0    0 0 #6b3fd4,
     0   -2px  0 0 #6b3fd4,
     0    2px  0 0 #6b3fd4;
}

.pixel-badge--danger {
  background: var(--danger);
  color: #fff;
  box-shadow:
    -2px  0    0 0 #a02624,
     2px  0    0 0 #a02624,
     0   -2px  0 0 #a02624,
     0    2px  0 0 #a02624;
}

/* Animated notification dot */
.pixel-badge--dot {
  width: 10px;
  height: 10px;
  padding: 0;
  background: var(--danger);
  animation: pixel-bounce 1.5s var(--ease-default) infinite;
}


/* ==========================================================================
   9.  PIXEL TOGGLE SWITCH (lever style)
   ========================================================================== */

.pixel-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  background: var(--bg-surface);
  border: none;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-default);
  box-shadow:
    inset -2px  0    0 0 var(--border-wood),
    inset  2px  0    0 0 var(--border-wood),
    inset  0   -2px  0 0 var(--border-wood),
    inset  0    2px  0 0 var(--border-wood);
}

/* The lever / knob */
.pixel-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--parchment);
  transition: transform var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
  box-shadow:
    -2px  0    0 0 var(--border-wood),
     2px  0    0 0 var(--border-wood),
     0   -2px  0 0 var(--border-wood),
     0    2px  0 0 var(--border-wood),
     0    2px  0 0 var(--border-wood);
}

.pixel-toggle:checked {
  background: var(--accent-green);
}

.pixel-toggle:checked::after {
  transform: translateX(20px);
  background: #fff;
}

.pixel-toggle:hover::after {
  background: var(--parchment-aged);
}

.pixel-toggle:checked:hover::after {
  background: #f0f0f0;
}

.pixel-toggle:focus-visible {
  outline: none;
  box-shadow:
    inset -2px  0    0 0 var(--border-focus),
    inset  2px  0    0 0 var(--border-focus),
    inset  0   -2px  0 0 var(--border-focus),
    inset  0    2px  0 0 var(--border-focus),
    0 0 0 4px rgba(232, 93, 58, 0.25);
}


/* ==========================================================================
   10. PIXEL SCROLLBAR
   ========================================================================== */

.pixel-scrollbar::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

.pixel-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-left: 2px solid var(--border-wood);
}

.pixel-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-track);
  border-radius: 0;
}

.pixel-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.pixel-scrollbar::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* Firefox scrollbar */
.pixel-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}


/* ==========================================================================
   11. PIXEL INPUT FIELD
   ==========================================================================
   Retro styled text inputs, textareas, selects.
   ========================================================================== */

.pixel-input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-on-parchment);
  background: var(--parchment);
  border: none;
  border-radius: 0;
  outline: none;
  transition: box-shadow var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
  /* Inset pixel border (recessed look) */
  box-shadow:
    inset -2px  0    0 0 var(--border-wood),
    inset  2px  0    0 0 var(--border-wood-light),
    inset  0   -2px  0 0 var(--border-wood),
    inset  0    2px  0 0 var(--border-wood-light),
    inset  2px  2px  0 0 var(--border-wood-light),
    inset -2px -2px  0 0 var(--border-wood);
}

.pixel-input::placeholder {
  color: var(--text-subtle);
  opacity: 0.7;
}

.pixel-input:hover {
  background: #fcf0d8;
}

.pixel-input:focus {
  background: #fff8ee;
  box-shadow:
    inset -2px  0    0 0 var(--border-focus),
    inset  2px  0    0 0 var(--border-focus),
    inset  0   -2px  0 0 var(--border-focus),
    inset  0    2px  0 0 var(--border-focus),
    0 0 0 4px rgba(232, 93, 58, 0.2);
}

/* Dark variant for dark panels */
.pixel-input--dark {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow:
    inset -2px  0    0 0 var(--border-dark),
    inset  2px  0    0 0 var(--border-dark-hover),
    inset  0   -2px  0 0 var(--border-dark),
    inset  0    2px  0 0 var(--border-dark-hover);
}

.pixel-input--dark::placeholder {
  color: var(--text-subtle);
}

.pixel-input--dark:hover {
  background: var(--bg-elevated);
}

.pixel-input--dark:focus {
  background: var(--bg-elevated);
  box-shadow:
    inset -2px  0    0 0 var(--border-focus),
    inset  2px  0    0 0 var(--border-focus),
    inset  0   -2px  0 0 var(--border-focus),
    inset  0    2px  0 0 var(--border-focus),
    0 0 0 4px rgba(232, 93, 58, 0.2);
}

/* Pixel font variant for search / command inputs */
.pixel-input--pixel {
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  letter-spacing: var(--tracking-pixel);
  padding: var(--space-3) var(--space-4);
}

/* Textarea */
.pixel-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Select */
.pixel-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-8);
  background-image:
    /* Pixel down-arrow via CSS gradient trick */
    linear-gradient(45deg, transparent 50%, var(--border-wood) 50%),
    linear-gradient(-45deg, transparent 50%, var(--border-wood) 50%);
  background-position:
    calc(100% - 14px) center,
    calc(100% - 8px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}


/* ==========================================================================
   12. UTILITY CLASSES
   ========================================================================== */

/* Pixel-art image rendering */
.pixel-render {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Pixel font utility */
.font-pixel {
  font-family: var(--font-pixel);
  letter-spacing: var(--tracking-pixel);
}

/* Gold glow effect */
.pixel-glow-gold {
  box-shadow: var(--shadow-glow);
}

/* Accent glow effect */
.pixel-glow-accent {
  box-shadow: var(--shadow-glow-accent);
}

/* Parchment text color */
.text-parchment {
  color: var(--text-on-parchment);
}

/* Pixel divider (horizontal rule) */
.pixel-divider {
  border: none;
  height: 2px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--border-wood) 0px,
      var(--border-wood) 4px,
      transparent 4px,
      transparent 8px
    );
  margin: var(--space-4) 0;
}

/* Pixel divider vertical */
.pixel-divider-v {
  border: none;
  width: 2px;
  align-self: stretch;
  background:
    repeating-linear-gradient(
      180deg,
      var(--border-wood) 0px,
      var(--border-wood) 4px,
      transparent 4px,
      transparent 8px
    );
  margin: 0 var(--space-4);
}