.numberlink-shell{
  width:100%;height:100%;min-width:0;min-height:0;display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(.45rem,1.3cqh,.85rem);
  place-items:stretch;
}
.numberlink-hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;width:min(100%,42rem);margin-inline:auto}
.numberlink-hud>div{min-width:0;padding:.42rem .55rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-align:center}
.numberlink-hud span{display:block;color:var(--text-subtle);font-size:.68rem;font-weight:700;line-height:1.1;text-transform:uppercase;letter-spacing:.04em}
.numberlink-hud strong{display:block;margin-top:.16rem;color:var(--text);font-size:clamp(.78rem,1.5cqw,.95rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.numberlink-board-slot{container-type:size;display:grid;place-items:center;min-height:0;min-width:0;width:100%;height:100%}
.numberlink-board{
  --numberlink-gap:clamp(2px,.55cqw,5px);
  width:min(100%,100cqh);height:min(100%,100cqw);max-width:100%;max-height:100%;aspect-ratio:1;
  display:grid;grid-template-columns:repeat(var(--numberlink-size),minmax(0,1fr));grid-template-rows:repeat(var(--numberlink-size),minmax(0,1fr));
  gap:var(--numberlink-gap);padding:clamp(.35rem,1.2cqw,.8rem);box-sizing:border-box;border-radius:clamp(14px,2.4cqw,24px);
  background:var(--game-accent,var(--product-puzzles));
  border:1px solid var(--game-accent,var(--product-puzzles));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 32px rgba(15,23,42,.09);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.numberlink-cell{
  --path-width:clamp(5px,14%,11px);
  position:relative;min-width:0;min-height:0;padding:0;border:1px solid var(--line);border-radius:clamp(5px,1cqw,9px);
  background:var(--surface);overflow:hidden;cursor:crosshair;isolation:isolate;
}
.numberlink-cell:focus-visible{outline:3px solid var(--game-accent,var(--product-puzzles));outline-offset:-3px;z-index:5}\n.numberlink-cell.is-active{border-color:var(--game-accent,var(--product-puzzles));background:var(--game-accent,var(--product-puzzles))}
.numberlink-cell.is-hint{animation:numberlink-hint .8s ease-in-out infinite alternate;box-shadow:none}
.numberlink-segment,.numberlink-joint{position:absolute;z-index:1;display:block;background:var(--pair-color,var(--game-accent,#0ea5e9));pointer-events:none}
.numberlink-joint{left:50%;top:50%;width:var(--path-width);height:var(--path-width);border-radius:50%;transform:translate(-50%,-50%);box-shadow:none}
.numberlink-segment.is-n,.numberlink-segment.is-s{left:calc(50% - var(--path-width)/2);width:var(--path-width);height:calc(50% + var(--numberlink-gap)/2)}
.numberlink-segment.is-n{top:calc(var(--numberlink-gap)/-2)}
.numberlink-segment.is-s{top:50%}
.numberlink-segment.is-w,.numberlink-segment.is-e{top:calc(50% - var(--path-width)/2);height:var(--path-width);width:calc(50% + var(--numberlink-gap)/2)}
.numberlink-segment.is-w{left:calc(var(--numberlink-gap)/-2)}
.numberlink-segment.is-e{left:50%}
.numberlink-endpoint{
  position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;
  width:clamp(1.35rem,58%,3.4rem);aspect-ratio:1;border-radius:50%;background:var(--pair-color);color:#fff;
  border:1px solid var(--line);box-shadow:none;
  font:800 clamp(.66rem,2.2cqw,1.18rem)/1 var(--font-sans);font-variant-numeric:tabular-nums;pointer-events:none;
}
.numberlink-board.is-complete .numberlink-endpoint{animation:numberlink-complete .55s cubic-bezier(.2,.9,.25,1.2)}
.numberlink-instructions{margin:0;text-align:center;color:var(--text-subtle);font-size:clamp(.72rem,1.5cqw,.88rem);line-height:1.3}
@keyframes numberlink-hint{from{transform:scale(.97)}to{transform:scale(1);background:var(--game-accent,var(--product-puzzles))}}
@keyframes numberlink-complete{0%{transform:translate(-50%,-50%) scale(.85)}70%{transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-50%) scale(1)}}
@media(max-width:700px){
  .numberlink-shell{gap:.5rem}
  .numberlink-hud{gap:.3rem}
  .numberlink-hud>div{padding:.34rem .3rem;border-radius:8px}
  .numberlink-hud span{font-size:.58rem}.numberlink-hud strong{font-size:.72rem}
  .numberlink-board{padding:.3rem;border-radius:14px}
  .numberlink-instructions{font-size:.68rem}
}
@media(max-height:700px) and (orientation:landscape){
  .numberlink-hud{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .numberlink-shell{grid-template-rows:minmax(0,1fr) auto;gap:.3rem}
  .numberlink-board-slot{grid-row:1}.numberlink-instructions{grid-row:2}
}
@media(prefers-reduced-motion:reduce){.numberlink-cell.is-hint,.numberlink-board.is-complete .numberlink-endpoint{animation:none}}

.numberlink-board.is-large{
  --numberlink-gap:clamp(1px,.32cqw,3px);
  padding:clamp(.22rem,.7cqw,.5rem);
  border-radius:clamp(10px,1.7cqw,18px);
}
.numberlink-board.is-large .numberlink-cell{
  --path-width:clamp(3px,12%,8px);
  border-radius:clamp(3px,.65cqw,6px);
}
.numberlink-board.is-large .numberlink-endpoint{
  width:clamp(.95rem,62%,2.4rem);
  border-width:clamp(1px,.24cqw,3px);
  font-size:clamp(.5rem,1.35cqw,.86rem);
}
.numberlink-board.is-xl{
  --numberlink-gap:clamp(1px,.24cqw,2px);
  padding:clamp(.16rem,.5cqw,.38rem);
}
.numberlink-board.is-xl .numberlink-cell{
  --path-width:clamp(2px,11%,6px);
  border-radius:clamp(2px,.45cqw,5px);
}
.numberlink-board.is-xl .numberlink-endpoint{
  width:clamp(.8rem,66%,1.8rem);
  font-size:clamp(.42rem,1.05cqw,.72rem);
}