:root{
    --dusk-deep: #1B2A3C;
    --dusk-mid: #2C4257;
    --porch-amber: #E8A23B;
    --porch-amber-soft: #F4C97A;
    --sage: #8FA888;
    --cream: #F4EFE3;
    --wood: #6B4A33;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{ background: var(--dusk-deep); }
  body{
    background: transparent;
    color: var(--cream);
    font-family: 'Karla', sans-serif;
    min-height: 100vh;
  }

  .sky{
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #0F1A26 0%, var(--dusk-deep) 45%, var(--dusk-mid) 100%);
    z-index: -2;
  }

  .stars{
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
      radial-gradient(1px 1px at 10% 20%, rgba(244,239,227,0.5), transparent),
      radial-gradient(1px 1px at 80% 10%, rgba(244,239,227,0.4), transparent),
      radial-gradient(1px 1px at 60% 30%, rgba(244,239,227,0.6), transparent),
      radial-gradient(1px 1px at 30% 60%, rgba(244,239,227,0.3), transparent),
      radial-gradient(1px 1px at 90% 70%, rgba(244,239,227,0.5), transparent),
      radial-gradient(1px 1px at 45% 15%, rgba(244,239,227,0.4), transparent),
      radial-gradient(1px 1px at 70% 45%, rgba(244,239,227,0.3), transparent);
    opacity: 0.8;
  }

  .lamp{
    width: 14px;
    height: 22px;
    background: linear-gradient(180deg, var(--porch-amber), #C97E1E);
    border-radius: 3px 3px 8px 8px;
    margin: 0 auto 6px;
    position: relative;
    box-shadow:
      0 0 20px 6px rgba(232,162,59,0.55),
      0 0 60px 30px rgba(232,162,59,0.18);
    animation: flicker 4s ease-in-out infinite;
  }
  .lamp::before{
    content:'';
    position:absolute;
    top:-7px; left:50%;
    transform: translateX(-50%);
    width: 16px; height: 6px;
    background: var(--wood);
    border-radius: 2px;
  }
  .lamp::after{
    content:'';
    position:absolute;
    top:-13px; left:50%;
    transform: translateX(-50%);
    width: 2px; height: 7px;
    background: var(--wood);
  }

  @keyframes flicker{
    0%, 100% { opacity: 1; }
    45% { opacity: 0.85; }
    50% { opacity: 1; }
    52% { opacity: 0.75; }
    55% { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce){
    .lamp{ animation: none; }
  }
