.number-waffle-shell{
  container-type:inline-size;
  width:min(100%,680px);
  margin-inline:auto;
  display:grid;
  gap:clamp(8px,1.8cqi,14px);
}

.number-waffle-frame{
  width:100%;
  box-sizing:border-box;
  padding:clamp(3px,1.05cqi,8px);
  border:1px solid color-mix(in srgb,var(--game-accent) 24%,var(--line));
  border-radius:clamp(14px,3.5cqi,24px);
  background:color-mix(in srgb,var(--surface) 92%,var(--game-accent) 8%);
  box-shadow:0 16px 42px color-mix(in srgb,#000 26%,transparent),inset 0 1px color-mix(in srgb,#fff 7%,transparent);
}

.number-waffle-board{
  display:grid;
  grid-template-columns:repeat(var(--number-waffle-size),minmax(0,1fr));
  grid-template-rows:repeat(var(--number-waffle-size),minmax(0,1fr));
  gap:clamp(1px,.7cqi,5px);
  width:100%;
  aspect-ratio:1;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.number-waffle-tile,
.number-waffle-clue-cell{
  min-width:0;
  min-height:0;
  aspect-ratio:1;
}

.number-waffle-tile{
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:1px solid color-mix(in srgb,var(--game-accent) 18%,var(--line));
  border-radius:clamp(4px,1.45cqi,12px);
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,#fff 6%),color-mix(in srgb,var(--surface) 92%,#000 8%));
  color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  line-height:1;
  box-shadow:inset 0 1px color-mix(in srgb,#fff 8%,transparent),0 3px 9px color-mix(in srgb,#000 18%,transparent);
  cursor:grab;
  transition:transform .14s ease,border-color .14s ease,background-color .14s ease,box-shadow .14s ease,filter .14s ease;
  -webkit-tap-highlight-color:transparent;
}

.number-waffle-shell[data-size="7"] .number-waffle-tile{font-size:clamp(.95rem,6.1cqi,2.05rem)}
.number-waffle-shell[data-size="9"] .number-waffle-tile{font-size:clamp(.78rem,4.7cqi,1.72rem)}
.number-waffle-shell[data-size="11"] .number-waffle-tile{font-size:clamp(.66rem,3.85cqi,1.42rem)}
.number-waffle-shell[data-size="15"] .number-waffle-tile{font-size:clamp(.58rem,3.05cqi,1.08rem)}

.number-waffle-tile:hover:not(.is-correct):not(.is-locked){
  border-color:color-mix(in srgb,var(--game-accent) 64%,var(--line));
  filter:brightness(1.06);
}

.number-waffle-tile:focus-visible{
  outline:3px solid color-mix(in srgb,var(--game-accent-2) 72%,white);
  outline-offset:1px;
  z-index:4;
}

.number-waffle-tile.is-correct{
  border-color:color-mix(in srgb,#22c55e 56%,var(--line));
  background:linear-gradient(145deg,color-mix(in srgb,#22c55e 36%,var(--surface)),color-mix(in srgb,#16a34a 25%,var(--surface)));
  color:color-mix(in srgb,var(--text) 90%,#fff);
  box-shadow:inset 0 1px color-mix(in srgb,#fff 14%,transparent),0 4px 11px color-mix(in srgb,#16a34a 18%,transparent);
  cursor:default;
}

.number-waffle-tile.is-selected{
  border-color:var(--game-accent-2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--game-accent) 30%,transparent),0 8px 18px color-mix(in srgb,var(--game-accent) 16%,transparent);
  transform:translateY(-1px) scale(1.03);
  z-index:3;
}

.number-waffle-tile.is-drag-source{
  cursor:grabbing;
  transform:scale(.93);
  opacity:.72;
}

.number-waffle-tile.is-drop-target{
  border-color:var(--game-accent-2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--game-accent) 34%,transparent);
  transform:scale(1.04);
  z-index:3;
}

.number-waffle-tile.is-hinted{
  animation:number-waffle-hint .72s ease-in-out 2;
  z-index:3;
}

.number-waffle-clue-cell{
  display:grid;
  place-items:center;
  pointer-events:none;
}

.number-waffle-clue{
  position:relative;
  display:grid;
  place-items:center;
  width:72%;
  aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--game-accent) 44%,var(--line));
  border-radius:50%;
  background:color-mix(in srgb,var(--surface) 84%,var(--game-accent) 16%);
  color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 5%,transparent),0 3px 9px color-mix(in srgb,#000 20%,transparent);
}

.number-waffle-clue strong{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  line-height:1;
}

.number-waffle-shell[data-size="7"] .number-waffle-clue strong{font-size:clamp(.56rem,3.1cqi,1rem)}
.number-waffle-shell[data-size="9"] .number-waffle-clue strong{font-size:clamp(.5rem,2.5cqi,.84rem)}
.number-waffle-shell[data-size="11"] .number-waffle-clue strong{font-size:clamp(.45rem,2.05cqi,.72rem)}
.number-waffle-shell[data-size="15"] .number-waffle-clue strong{font-size:clamp(.38rem,1.52cqi,.58rem)}

.number-waffle-clue-arrow{
  position:absolute;
  display:grid;
  place-items:center;
  width:34%;
  height:34%;
  color:var(--game-accent-2);
  font-weight:900;
  line-height:1;
}

.number-waffle-shell[data-size="7"] .number-waffle-clue-arrow{font-size:clamp(.4rem,2cqi,.72rem)}
.number-waffle-shell[data-size="9"] .number-waffle-clue-arrow{font-size:clamp(.34rem,1.55cqi,.58rem)}
.number-waffle-shell[data-size="11"] .number-waffle-clue-arrow{font-size:clamp(.3rem,1.25cqi,.5rem)}
.number-waffle-shell[data-size="15"] .number-waffle-clue-arrow{font-size:clamp(.25rem,.95cqi,.4rem)}

.number-waffle-clue-arrow--n{top:-28%;left:33%}
.number-waffle-clue-arrow--e{right:-28%;top:33%}
.number-waffle-clue-arrow--s{bottom:-28%;left:33%}
.number-waffle-clue-arrow--w{left:-28%;top:33%}

.number-waffle-star-strip{
  min-height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(4px,1.2cqi,8px);
  color:color-mix(in srgb,var(--muted) 72%,transparent);
  font-size:clamp(.86rem,3.2cqi,1.16rem);
  letter-spacing:.02em;
}

.number-waffle-star-strip .is-earned{
  color:#fbbf24;
  filter:drop-shadow(0 2px 5px color-mix(in srgb,#f59e0b 30%,transparent));
}

.number-waffle-budget-copy{
  margin-inline-start:clamp(6px,1.8cqi,12px);
  color:var(--muted);
  font:800 clamp(.64rem,2.35cqi,.78rem)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.04em;
}

.number-waffle-instructions{
  margin:0;
  color:var(--muted);
  text-align:center;
  font-size:clamp(.68rem,2.5cqi,.8rem);
  line-height:1.45;
}

@keyframes number-waffle-hint{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--game-accent) 0%,transparent)}
  50%{
    border-color:var(--game-accent-2);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--game-accent) 38%,transparent);
    transform:translateY(-1px);
  }
}

@container (max-width:460px){
  .number-waffle-shell{gap:8px}
  .number-waffle-frame{
    padding:1px;
    border-radius:14px;
  }
  .number-waffle-board{gap:2px}
  .number-waffle-tile{border-radius:6px}
  .number-waffle-shell[data-size="11"] .number-waffle-board,
  .number-waffle-shell[data-size="15"] .number-waffle-board{gap:1px}
  .number-waffle-shell[data-size="15"] .number-waffle-tile{border-radius:4px}
  .number-waffle-shell[data-size="11"] .number-waffle-clue,
  .number-waffle-shell[data-size="15"] .number-waffle-clue{width:78%}
  .number-waffle-star-strip{min-height:22px}
}

@media (max-width:600px){
  .number-waffle-shell{
    width:100%;
    max-width:none;
  }
  .number-waffle-frame{
    border-color:transparent;
    background:transparent;
    box-shadow:none;
  }
}

@media (orientation:landscape) and (max-height:640px){
  .number-waffle-shell{
    width:min(78vh,100%);
    gap:5px;
  }
  .number-waffle-star-strip{min-height:18px}
  .number-waffle-instructions{display:none}
}

@media (prefers-reduced-motion:reduce){
  .number-waffle-tile{transition:none}
  .number-waffle-tile.is-hinted{
    animation:none;
    outline:3px solid var(--game-accent-2);
    outline-offset:1px;
  }
}