:root{
  --bg:#0b0f12;
  --panel:#111417;
  --muted:#9aa3a8;
  --accent:#2d9c6a;
  --accent-2:#c94f3f;
  --snow:#e6f3fb;
}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--snow);
  font-family:Segoe UI, Arial, sans-serif;
}

body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

#wheelimg{
  width:400px;
  height:400px;
  margin:28px auto 8px auto;
  background-repeat: no-repeat;
  background-size: auto;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

#wheelinfo{
  text-align:center;
  color:var(--muted);
  margin-bottom:12px;
}

#letters{
  font-family: 'Lucida Console', monospace;
  color:var(--snow);
  max-width:900px;
  margin:0 auto 36px auto;
  text-align:center;
  white-space: nowrap;
}

#shiftedLetters{
  display:inline-block;
}

.christmas-decor{
  position:fixed;
  bottom:8px;
  width:84px;
  height:120px;
  pointer-events:none;
  opacity:0.95;
}
.tree-left{ left:12px; }
.tree-right{ right:12px; transform:scaleX(-1); }
.snowman-left{ left:110px; bottom:12px; width:64px; height:96px; }
.snowman-right{ right:110px; bottom:12px; width:64px; height:96px; }

.snow-canvas{
  position:fixed;
  left:0; top:0; right:0; bottom:0;
  pointer-events:none;
  z-index:50;
  background-image: radial-gradient(circle at 10% 20%, rgba(230,243,251,0.95) 1px, transparent 2px),
                    radial-gradient(circle at 60% 40%, rgba(230,243,251,0.9) 1px, transparent 2px),
                    radial-gradient(circle at 30% 80%, rgba(230,243,251,0.85) 1px, transparent 2px);
  background-size: 100px 100px, 120px 120px, 80px 80px;
  opacity:0.22;
  animation: drift 12s linear infinite;
}

@keyframes drift{
  from { transform: translateY(-4%) translateX(0); }
  to   { transform: translateY(6%) translateX(2%); }
}

body[bgcolor] { background:none; }

@media (max-width:600px){
  .christmas-decor{ display:none; }
  #wheelimg{ width:300px; height:300px; }
}