@property --spinglow-rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false;
}

/* Scoped + centered so it won't fight your site CSS */
#wordle {
  --bg:#191919;
  --card:#1d1d1d;
  --muted:#a0a0a0;
  --text:#e7e7e7;
  --accent:#f64040;
  --outline:#2a2a2a;
  --tile:#151515;

  --spinwglow-height: 980px;
  --spinwglow-width: 740px;

  --gray:#3a3a3a;
  --yellow:#f6f340;
  --green:#39ce4d;

  color:var(--text);
}

/* center the whole app */
#wordle .grid {
  max-width: var(--spinwglow-width);
  margin: 0 auto;
  padding: 12px 16px 32px;
}

/* hero */
#wordle .hero{ padding:18px 16px 0; text-align:center; }
#wordle .hero h1{ margin:0 0 6px; font-size:clamp(22px, 3.5vw, 32px); letter-spacing:.4px; }
#wordle .muted{ color:var(--muted); }

/* toolbar */
#wordle .toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px;}
#wordle .stats{ display:flex; gap:14px; }
#wordle .label{ color:var(--muted); margin-right:6px; }

/* buttons */
#wordle .btn{
  background:var(--accent);
  color:#191919;
  border:none;
  padding:8px 12px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}

/* guesses grid */
#wordle .rows{ display:flex; flex-direction:column; gap:12px; margin-top:6px; }
#wordle .row{ display:flex; align-items:flex-start; gap:10px; }
#wordle .cells{ display:grid; grid-template-columns: repeat(5, 64px); gap:10px; }

/* each grid cell stacks tile + pills */
#wordle .cell{ display:flex; flex-direction:column; align-items:center; gap:6px; }

/* tiles */
#wordle .tile{
  width:64px; height:64px; border-radius:10px;
  background:var(--tile);
  display:grid; place-items:center;
  border:1px solid #2a2a2a;
  font-weight:800; font-size:28px; letter-spacing:1px;
  text-transform:uppercase;
  position:relative; user-select:none;
}
#wordle .tile input{
  width:100%;
  height:100%; 
  text-align:center;
  background:transparent; 
  color:var(--text);
  border:none; 
  outline:none; 
  font:inherit;
  text-transform:uppercase; 
  caret-color:var(--accent);
}

/* tile color states */
#wordle .tile.gray{ background:var(--gray); border-color:#4a4a4a }
#wordle .tile.yellow{ background:var(--yellow); color:#111; border-color:#c7b24a }
#wordle .tile.green{ background:var(--green); border-color:#43b86b }

/* tiny pills under each tile */
#wordle .pills{ display:flex; gap:6px; }
#wordle .pill{
  width:px; height:14px; border-radius:999px;
  border:1px solid #0006; cursor:pointer;
  outline:none; padding:0; background:#2a2a2a;
  transition:transform .08s ease, box-shadow .08s ease, opacity .08s ease;
}
#wordle .pill.gray{ background:var(--gray);}
#wordle .pill.yellow{ background:var(--yellow); border-color:#7a6a22; }
#wordle .pill.green{ background:var(--green); border-color:#1e5b36; }
#wordle .pill:focus-visible{ box-shadow:0 0 0 2px #fff3; }
#wordle .pill:hover{ transform:translateY(-1px)}

/* results */
#wordle .results-header{
  justify-content:space-between;
  margin-top:14px; 
  margin-bottom:8px;
}

#wordle .pill{
  width:14px; height:14px; border-radius:50%; border:1px solid rgba(255,255,255,0.25);
  background:#222; cursor:pointer; padding:0; outline:none;
  transition: transform .12s ease;
}

#wordle .wordGuesses{ margin-top:16px; }
#wordle .wordGuesses h2{ font-size:18px; margin-bottom:10px; }

#wordle .results{margin-top:12px; display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; max-height:300px; overflow:auto; padding-bottom:6px;}
#wordle .result{
  background:#2a2a2a; border-bottom:1px solid #262626; border-radius:12px; padding:10px; text-align:center; font-weight:800; letter-spacing:1px;
}

#wordle .result:last-child{ border-bottom:none }
#wordle .result:hover{ background:#191919; cursor:pointer; transform:translateY(-1px); transition:transform .12s ease, background.12s ease; }

/* small help text */
#wordle .help{ margin-top:8px;}

#wordle .legend{padding:2px 6px; border-radius:6px; font-weight:700}
#wordle .legend.gray{background:var(--gray)}
#wordle .legend.yellow{background:var(--yellow); color:#111}
#wordle .legend.green{background:var(--green); color:#111}

@keyframes spin {
    0% {
        --spinglow-rotate: 0deg;
    }

    100% {
        --spinglow-rotate: 360deg;
    }
}

/* optional: tweak these 2 numbers to taste */
#wordle { --halo: clamp(16px, 4vw, 36px); --ring: 2px; }

#wordle .cardGlow{
  position: relative;
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: 15px;
  padding: 25px;
  margin: 0 auto 0;
  color: #e1e1e1;
  background-size: cover;
  background-position: center;
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: visible;
}

/* keep real content above the glow */
#wordle .cardGlow > * { position: relative; z-index: 1; }

/* both glow layers are now sized relative to the card box */
#wordle .cardGlow::before,
#wordle .cardGlow::after{
  content:"";
  position:absolute;
  inset:0;                   /* match the card exactly */
  border-radius: inherit;
  background-image: linear-gradient(var(--spinglow-rotate), #7f31ff, #f64040);
  animation: spin 2.5s linear infinite;
  pointer-events:none;
  z-index:-1;
}

/* thin rotating outline (a gradient ring) */
#wordle .cardGlow::before{
  inset: calc(var(--halo) * -0.1);                 /* grow evenly T/R/B/L */
  opacity:1;
}

/* outer soft halo — 1.2x the card, blurred */
#wordle .cardGlow::after {
  width: var(--spinwglow-width * 1.1);
  filter: blur(calc(var(--spinwglow-height) / 20));
  opacity: 1;
}