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

.gridlock-frame{
  width:100%;
  box-sizing:border-box;
  padding:clamp(6px,1.6cqi,10px) clamp(34px,7cqi,46px) clamp(6px,1.6cqi,10px) clamp(6px,1.6cqi,10px);
  border:1px solid var(--game-accent,var(--product-puzzles));
  border-radius:clamp(15px,3.5cqi,24px);
  background:var(--surface);
  box-shadow:none;
}

.gridlock-board-wrap{
  position:relative;
  width:100%;
}

.gridlock-board{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(6,minmax(0,1fr));
  gap:clamp(2px,.75cqi,5px);
  width:100%;
  aspect-ratio:1;
  padding:clamp(3px,.9cqi,6px);
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:clamp(12px,2.7cqi,19px);
  background:var(--surface);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.gridlock-cell{
  min-width:0;
  min-height:0;
  border:1px solid var(--line);
  border-radius:clamp(4px,1.15cqi,8px);
  background:var(--surface);
  pointer-events:none;
}

.gridlock-exit-lane{
  align-self:center;
  justify-self:end;
  width:18%;
  height:54%;
  margin-inline-end:-1px;
  border-radius:999px 0 0 999px;
  background:var(--product-puzzles);
  opacity:.42;
  pointer-events:none;
  z-index:1;
}

.gridlock-vehicle{
  position:relative;
  z-index:3;
  min-width:0;
  min-height:0;
  margin:clamp(2px,.45cqi,4px);
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--vehicle-border,var(--line));
  border-radius:clamp(8px,2cqi,15px);
  background:var(--vehicle-bg,var(--game-accent));
  color:var(--vehicle-fg,#fff);
  box-shadow:none;
  cursor:grab;
  transform:translate(var(--gridlock-drag-x,0),var(--gridlock-drag-y,0));
  transition:transform .12s ease,border-color .12s ease,filter .12s ease;
  -webkit-tap-highlight-color:transparent;
}

.gridlock-vehicle:hover{
  filter:brightness(1.06);
}

.gridlock-vehicle:focus-visible,
.gridlock-destination:focus-visible,
.gridlock-exit:focus-visible{
  outline:3px solid var(--game-accent-2,var(--brand-aqua));
  outline-offset:2px;
}

.gridlock-vehicle.is-selected{
  border-color:var(--game-accent-2,var(--brand-aqua));
  outline:2px solid var(--game-accent-2,var(--brand-aqua));
  outline-offset:-4px;
  z-index:5;
}

.gridlock-vehicle.is-dragging{
  cursor:grabbing;
  transition:none;
  z-index:8;
}

.gridlock-vehicle.is-hinted{
  outline:3px solid var(--game-accent-2,var(--brand-aqua));
  outline-offset:-5px;
}

.gridlock-vehicle.is-taxi{
  --vehicle-bg:#FF7397;
  --vehicle-border:#FF7397;
  --vehicle-fg:#172C6B;
  z-index:4;
}

.gridlock-vehicle--1{
  --vehicle-bg:#55D4E8;
  --vehicle-border:#55D4E8;
  --vehicle-fg:#172C6B;
}

.gridlock-vehicle--2{
  --vehicle-bg:#65439A;
  --vehicle-border:#65439A;
  --vehicle-fg:#FFF8DC;
}

.gridlock-vehicle--3{
  --vehicle-bg:#172C6B;
  --vehicle-border:#55D4E8;
  --vehicle-fg:#FFF8DC;
}

.gridlock-vehicle--4{
  --vehicle-bg:#FFF8DC;
  --vehicle-border:#65439A;
  --vehicle-fg:#172C6B;
}

.gridlock-vehicle-label{
  display:grid;
  place-items:center;
  width:clamp(18px,4.8cqi,30px);
  aspect-ratio:1;
  border:1px solid currentColor;
  border-radius:50%;
  font:900 clamp(.62rem,2.25cqi,.9rem)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  opacity:.9;
}

.gridlock-destination{
  z-index:10;
  align-self:center;
  justify-self:center;
  width:clamp(22px,5.6cqi,34px);
  aspect-ratio:1;
  padding:0;
  border:2px solid var(--game-accent-2,var(--brand-aqua));
  border-radius:50%;
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  box-shadow:none;
}

.gridlock-destination::before{
  content:"";
  display:block;
  width:34%;
  aspect-ratio:1;
  margin:auto;
  border-radius:50%;
  background:var(--game-accent-2,var(--brand-aqua));
}

.gridlock-destination:hover{
  filter:brightness(1.08);
}

.gridlock-destination.is-hinted{
  outline:3px solid var(--product-puzzles);
  outline-offset:2px;
}

.gridlock-exit{
  position:absolute;
  top:41.6667%;
  right:clamp(-40px,-6.2cqi,-31px);
  width:clamp(30px,6cqi,40px);
  height:clamp(44px,10cqi,64px);
  translate:0 -50%;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:1px solid var(--product-puzzles);
  border-radius:0 999px 999px 0;
  background:var(--product-puzzles);
  color:#172C6B;
  font-size:clamp(1.1rem,4cqi,1.6rem);
  font-weight:900;
  cursor:pointer;
  transition:transform .12s ease,filter .12s ease,opacity .12s ease;
}

.gridlock-exit:not(:disabled):hover{
  filter:brightness(1.06);
  transform:translateX(2px);
}

.gridlock-exit:disabled{
  background:var(--surface);
  color:var(--muted);
  opacity:.58;
  cursor:not-allowed;
}

.gridlock-frame.is-complete .gridlock-vehicle,
.gridlock-frame.is-complete .gridlock-exit{
  cursor:default;
}

.gridlock-instructions{
  margin:0;
  color:var(--muted);
  text-align:center;
  font-size:clamp(.7rem,2.45cqi,.82rem);
  line-height:1.45;
}

@container (max-width:440px){
  .gridlock-frame{
    padding-block:2px;
    padding-inline-start:2px;
    padding-inline-end:31px;
    border-color:transparent;
    border-radius:12px;
  }

  .gridlock-board{
    gap:2px;
    padding:2px;
    border-radius:12px;
  }

  .gridlock-cell{
    border-radius:4px;
  }

  .gridlock-vehicle{
    margin:2px;
    border-radius:8px;
  }

  .gridlock-exit{
    right:-29px;
    width:29px;
    height:42px;
  }
}

@media (max-width:600px){
  .gridlock-shell{
    width:100%;
    max-width:none;
  }
}

@media (orientation:landscape) and (max-height:640px){
  .gridlock-shell{
    width:min(74vh,100%);
    gap:5px;
  }

  .gridlock-instructions{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .gridlock-vehicle,
  .gridlock-exit{
    transition:none;
  }
}