.equinox-shell{
  display:grid;
  gap:1rem;
  justify-items:center;
  width:min(100%,58rem);
  margin:0 auto;
}
.equinox-hud{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  width:100%;
}
.equinox-hud div{
  display:grid;
  gap:.12rem;
  min-width:5.25rem;
  padding:.48rem .68rem;
  border:1px solid var(--game-hud-border);
  border-radius:.8rem;
  background:var(--game-board-cell);
  text-align:center;
}
.equinox-hud span{
  color:var(--game-board-muted);
  font-size:.66rem;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.equinox-hud strong{font-size:.9rem}
.equinox-board-stage{
  --equinox-gap:clamp(.42rem,1.35vw,.72rem);
  width:min(96vw,42rem);
  padding:.5rem;
  border:1px solid var(--game-hud-border);
  border-radius:1rem;
  background:var(--game-board-cell);
  box-shadow:var(--game-board-shadow);
}
.equinox-board{
  display:grid;
  aspect-ratio:1;
  gap:var(--equinox-gap);
  width:100%;
}
.equinox-cell{
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  min-height:0;
  aspect-ratio:1;
  padding:0;
  border:2px solid var(--game-board-line);
  border-radius:clamp(.38rem,1vw,.72rem);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
}
.equinox-cell:hover:not(:disabled):not(.is-fixed){
  transform:translateY(-1px);
  border-color:var(--brand-aqua);
}
.equinox-cell.is-fixed{
  cursor:default;
  border-width:3px;
}
.equinox-cell.is-sun{background:var(--brand-coral);color:var(--brand-cobalt)}
.equinox-cell.is-moon{background:var(--brand-violet);color:var(--brand-cream)}
.equinox-cell.is-fixed.is-sun{border-color:var(--brand-cobalt)}
.equinox-cell.is-fixed.is-moon{border-color:var(--brand-aqua)}
.equinox-symbol{
  display:block;
  font:900 clamp(1rem,4.3vw,2.25rem)/1 var(--font-sans);
  transform:translateY(-.02em);
}
.equinox-cell.is-conflict{
  z-index:3;
  outline:3px solid var(--danger);
  outline-offset:-4px;
}
.equinox-cell:focus-visible{
  z-index:5;
  outline:3px solid var(--brand-aqua);
  outline-offset:2px;
}
.equinox-cell:disabled{opacity:1}
.equinox-relation{
  position:absolute;
  z-index:4;
  display:grid;
  place-items:center;
  width:clamp(1.05rem,2.7vw,1.55rem);
  height:clamp(1.05rem,2.7vw,1.55rem);
  border:2px solid var(--brand-cobalt);
  border-radius:999px;
  background:var(--brand-cream);
  color:var(--brand-cobalt);
  font:900 clamp(.66rem,1.8vw,.9rem)/1 var(--font-sans);
  pointer-events:none;
}
.equinox-relation.is-horizontal{
  top:50%;
  right:calc(var(--equinox-gap) / -2);
  transform:translate(50%,-50%);
}
.equinox-relation.is-vertical{
  left:50%;
  bottom:calc(var(--equinox-gap) / -2);
  transform:translate(-50%,50%);
}
.equinox-relation.is-same{border-color:var(--brand-aqua)}
.equinox-relation.is-different{border-color:var(--brand-coral)}
.equinox-relation.is-conflict{
  border-color:var(--danger);
  outline:2px solid var(--danger);
  outline-offset:1px;
}
.equinox-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.45rem;
  color:var(--game-board-muted);
  font-size:.78rem;
}
.equinox-legend>span{
  display:inline-flex;
  align-items:center;
  gap:.36rem;
  padding:.3rem .55rem;
  border:1px solid var(--game-hud-border);
  border-radius:999px;
  background:var(--game-board-cell);
}
.equinox-legend b{
  display:grid;
  place-items:center;
  width:1.45rem;
  height:1.45rem;
  border-radius:.42rem;
  font-size:.9rem;
}
.equinox-legend .is-sun b{background:var(--brand-coral);color:var(--brand-cobalt)}
.equinox-legend .is-moon b{background:var(--brand-violet);color:var(--brand-cream)}
.equinox-legend .is-relation b{
  border:1px solid var(--brand-aqua);
  background:var(--brand-cream);
  color:var(--brand-cobalt);
}
.equinox-instructions{
  max-width:46rem;
  margin:0;
  color:var(--game-board-muted);
  font-size:.82rem;
  text-align:center;
}
.equinox-shell.is-complete .equinox-board-stage{animation:equinox-complete .55s ease}
@keyframes equinox-complete{50%{transform:scale(1.012)}}

@media(width <= 40.625rem){
  .equinox-shell{gap:.72rem}
  .equinox-board-stage{
    --equinox-gap:clamp(.24rem,1.8vw,.48rem);
    width:min(100%,38rem);
    padding:.32rem;
    border-radius:.78rem;
  }
  .equinox-hud{gap:.3rem}
  .equinox-hud div{
    min-width:4.2rem;
    padding:.36rem .42rem;
  }
  .equinox-hud span{font-size:.57rem}
  .equinox-hud strong{font-size:.78rem}
  .equinox-symbol{font-size:clamp(.82rem,5.5vw,1.65rem)}
  .equinox-relation{
    width:clamp(.78rem,3.8vw,1.15rem);
    height:clamp(.78rem,3.8vw,1.15rem);
    border-width:1px;
    font-size:clamp(.52rem,2.6vw,.72rem);
  }
  .equinox-instructions{font-size:.74rem}
  .equinox-legend{gap:.28rem;font-size:.7rem}
}
@media(width <= 23.75rem){
  .equinox-hud div{min-width:3.8rem}
  .equinox-board-stage{padding:.22rem}
  .equinox-cell{border-width:1px}
  .equinox-cell.is-fixed{border-width:2px}
}
@media(prefers-reduced-motion:reduce){
  .equinox-cell{transition:none}
  .equinox-shell.is-complete .equinox-board-stage{animation:none}
}